Is it possible to selectively process assets based on their type using Gulp and Useref?

Question

Is it possible to selectively process assets based on their type using Gulp and Useref?

Is it possible to selectively process css and js assets using gulp-useref based on the build type specified in the html tags?

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

I am interested in differentiating and applying autoprefixing and jslint only to non-vendor assets by specifying different build types for css and css_vendors like below:

index.html

<!-- build:css_vendors css/vendors.min.css -->
    <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- endbuild -->
<!-- build:css css/styles.min.css -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/custom.css">
<!-- endbuild -->

gulpfile.js

gulp.task('useref', function() {
  return gulp.src('index.html')
    .pipe(useref({
      css: [ autoprefixer(), minifyCss() ],
      css_vendors: [ minifyCss() ]
    }))
    .pipe(gulp.dest('build/'));
});

Unfortunately, the current gulpfile.js implementation is not functioning as expected.

javascript html css gulp gulp-useref

Answer 1

Answer №1

If you're looking for a plugin that works similarly to what you need, you may want to check out gulp-html-replace - although I have limited knowledge of its functionality.

One way to achieve your desired outcome is by using useref with gulp-if to execute a function on a match:

.pipe($.if('*.css', autoprefixer()))

However, it appears that the resources in the source code you're working with may not be enough to meet your requirements, especially if you need to extract assets from an HTML file. Here's an example from one of my tasks:

gulp.task('build-dist', ['wiredep'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cb = Math.random();

    return gulp
        .src(config.indexFile)
        .pipe($.rename(config.outputIndexFile))
        .pipe($.plumber())
        .pipe(assets)
        .pipe($.if('*.css', $.csso()))
        .pipe($.if('**/lib.js', $.uglify({preserveComments: 'license', mangle: false})))
        .pipe($.if('**/init.js', $.ngAnnotate()))
        .pipe($.if('**/init.js', $.uglify({mangle: false})))
        .pipe($.if('**/app.js', $.ngAnnotate()))
        .pipe($.if('**/app.js', $.uglify()))
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.replace('.css"', '.css?cb=' + cb + '"'))
        .pipe($.replace('.js"', '.js?cb=' + cb + '"'))
        .pipe(gulp.dest(config.indexLocation))
        ;
});

Note: The $ symbol is defined as

var $ = require('gulp-load-plugins')({lazy: true});

- this shorthand helps avoid repetitive "require" statements. :)

Answer 2

If you're looking for a plugin that works similarly to what you need, you may want to check out gulp-html-replace - although I have limited knowledge of its functionality.

One way to achieve your desired outcome is by using useref with gulp-if to execute a function on a match:

.pipe($.if('*.css', autoprefixer()))

However, it appears that the resources in the source code you're working with may not be enough to meet your requirements, especially if you need to extract assets from an HTML file. Here's an example from one of my tasks:

gulp.task('build-dist', ['wiredep'], function () {

    var assets = $.useref.assets({searchPath: ''});
    var cb = Math.random();

    return gulp
        .src(config.indexFile)
        .pipe($.rename(config.outputIndexFile))
        .pipe($.plumber())
        .pipe(assets)
        .pipe($.if('*.css', $.csso()))
        .pipe($.if('**/lib.js', $.uglify({preserveComments: 'license', mangle: false})))
        .pipe($.if('**/init.js', $.ngAnnotate()))
        .pipe($.if('**/init.js', $.uglify({mangle: false})))
        .pipe($.if('**/app.js', $.ngAnnotate()))
        .pipe($.if('**/app.js', $.uglify()))
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.replace('.css"', '.css?cb=' + cb + '"'))
        .pipe($.replace('.js"', '.js?cb=' + cb + '"'))
        .pipe(gulp.dest(config.indexLocation))
        ;
});

Note: The $ symbol is defined as

var $ = require('gulp-load-plugins')({lazy: true});

- this shorthand helps avoid repetitive "require" statements. :)

Answer 3

Answer №2

If you want to achieve this, it seems like the best approach is to utilize gulp-usemin instead of gulp-useref. Here's an example:

index.html

<!-- build:css_vendors css/vendors.min.css -->
    <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- endbuild -->
<!-- build:css_styles css/styles.min.css -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/custom.css">
<!-- endbuild -->

gulpfile.js

gulp.task('usemin', function() {   
   return gulp.src('index.html')
     .pipe(plumber())
     .pipe(usemin({
       css_vendors: [ minifyCss() ],
       css_styles: [ autoprefixer(), minifyCss() ]
     }))
     .pipe(gulp.dest('./dist')); });

Answer 4

If you want to achieve this, it seems like the best approach is to utilize gulp-usemin instead of gulp-useref. Here's an example:

index.html

<!-- build:css_vendors css/vendors.min.css -->
    <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css">
<!-- endbuild -->
<!-- build:css_styles css/styles.min.css -->
    <link rel="stylesheet" href="css/theme.css">
    <link rel="stylesheet" href="css/custom.css">
<!-- endbuild -->

gulpfile.js

gulp.task('usemin', function() {   
   return gulp.src('index.html')
     .pipe(plumber())
     .pipe(usemin({
       css_vendors: [ minifyCss() ],
       css_styles: [ autoprefixer(), minifyCss() ]
     }))
     .pipe(gulp.dest('./dist')); });

Is it possible to selectively process assets based on their type using Gulp and Useref?

Answer №1

Answer №2

Similar questions

HighStocks should show categories instead of dates

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

Ways to determine the length of a string that includes zero or negative width characters such as u0007 or

The for...of loop cannot be used with the .for property since it is not iterable. (Is

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

Establishing the maximum width of a Vuetify expansion panel component

What is the best way to trigger a jQuery function once a form has been successfully submitted?

I need some help with adjusting the number of rows shown per page in MaterialReactTable

Looking for guidance on restructuring a JSON object?

Ways to modify input value based on another input in VueJS

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

Utilize JavaScript to parse JSON containing multiple object settings

Manage multiple sessions at the same time

Issue with React when attempting to add a secondary class to Toggle component

Tips for accessing a new variable within an array of objects using JavaScript

Properly segmenting sections into components in Angular

Sorting columns containing English, Japanese entries, and null values using a customized sorting algorithm in MUI Data Grid is a straightforward process

Finding the location of an "Apply" button on an Angular HTML page

Steps for connecting an external .otf file in p5.js

What could be causing me to receive no results?

Is it possible to selectively process assets based on their type using Gulp and Useref?

Answer №1

Answer №2

Similar questions

HighStocks should show categories instead of dates

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

Ways to determine the length of a string that includes zero or negative width characters such as u0007 or 

The for...of loop cannot be used with the .for property since it is not iterable. (Is

What is the best way to allow text input in a table cell to exceed the confines of the table when it is clicked on

Establishing the maximum width of a Vuetify expansion panel component

What is the best way to trigger a jQuery function once a form has been successfully submitted?

I need some help with adjusting the number of rows shown per page in MaterialReactTable

Looking for guidance on restructuring a JSON object?

Ways to modify input value based on another input in VueJS

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

Utilize JavaScript to parse JSON containing multiple object settings

Manage multiple sessions at the same time

Issue with React when attempting to add a secondary class to Toggle component

Tips for accessing a new variable within an array of objects using JavaScript

Properly segmenting sections into components in Angular

Sorting columns containing English, Japanese entries, and null values using a customized sorting algorithm in MUI Data Grid is a straightforward process

Finding the location of an "Apply" button on an Angular HTML page

Steps for connecting an external .otf file in p5.js

What could be causing me to receive no results?

Ways to determine the length of a string that includes zero or negative width characters such as u0007 or