Gulp is a cross-platform, streaming task runner that lets you automate many development tasks. At a high level, gulp reads files as streams and pipes the streams to different tasks.
to use Gulp, you need to first install the gulp dependencies package and add the gulpfuke.js file into the root of the project.
1 2 3 4 5 | npm install --global gulp-cli |
Above code will add the gulp into the composer.json file:
1 2 3 4 5 6 7 8 9 10 | { ... "devDependencies": { "gulp": "version" } } |
Some of the packages you can use to automate the process are:
- gulp-uglify (minify js files)
- gulp-concat (combining the js file)
- gulp-plumber (catches errors and prevents the pipe from breaking)
- gulp-minify-css (Combine and minify your CSS files)
- gulp-iconfont (converts SVG icons being used into a suite of icon fonts that work in IE and other browsers)
- gulp-autoprefixer (prefix the css)
- gulp-sass ( compile your Sass files)
- gulp-sourcemap (It automatically creates source maps from your code. )
- gulp-wp-rev (add hash to the js and css file in wp to clear cache after each run)
- gulp-load-plugin (include all of your Gulp plugins by requiring them.)
var $ = require('gulp-load-plugins')();
…pipe($.somePlugin())
after installing those packages, the package.json file should contains the following section
1 2 3 4 5 6 7 8 9 10 11 12 | { ... "devDependencies":{ "gulp":"version", "gulp-sass": "version", ....and all other gulp packages mentioned above } } |
In package.json, we can add the browserlinst section to use it in gulp later:
1 2 3 4 5 6 7 8 9 10 11 | { "browserslist": [ "> 0.9%", "last 3 versions", "IE 10" ] } |
How to use Gulp
to use the gulp, you need to add the package
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const gulp = require('gulp'); const gulpLoadPlugins = require('gulp-load-plugins'); const plugins = gulpLoadPlugins(); function generateCss(){ return gulp.src('./**/*.scss) .pipe(plugins.plumber()) .pipe(plugins.sass().on('error', sass.logError)) .pipe( plugins.autoprefixer( 'last 2 version','ie 8', 'ie 9'), .pipe(plugins.dest("/assets/css")) } |
if you want to use the browser list in package.json as the autoprefixer option, use the code below:
1 2 3 4 5 6 7 8 9 10 | .pipe( autoprefixer({ cascade: false, overrideBrowserslist: require("./package.json").browserslist, }) ) |
To add the javascript to gulp file, use the code below:
1 2 3 4 5 6 7 8 9 10 11 12 | function compileJs(){ return gulp.src('./**/*.js') .pipe(plugins.sourcemap.init()) .pipe(plugins.concat("final.js")) .pipe(plugins.uglify()) .pipe(plugins.sourcemap.write()) .pipe(gulp.dest("/assets/js") } |
For WordPress file, we can add the hash to the scripts and CSS file loaded into WordPress using the following code “src“
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function wp_hash(){ return gulp.src("./enquescriptfile.php") .pipe( plugins.wprev([ { handle<strong>:</strong> 'my-styles', file<strong>:</strong> './style.css', type<strong>:</strong> 'css' } ]) ) .pipe(gulp.dest("./") } |
You can then create a watch file to look for changes and run the function above:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function compileJs() { gulp.watch("./**/*.scss", gulp.parallel(generateCss)); gulp.watch( "./**/*.js", gulp.parallel(compileJs) ); } const watch = gulp.parallel(generateCss, compileJs, compileJs); export.watch = watch |
