Categories
Task automation with Gulp.js
What is Gulp
Gulp is a streaming build system for development. It allows you to automate different tasks like CSS minification, javascript compression, less/sass compiling.
Installing Gulp
To install gulp as global package use the -g modifier.
npm install -g gulp
Creating a package.json
- automatic - next command will guide you through a bunch of questions and at the end will create a
package.json
file.npm init
- manual - create a file named
package.json
and save it in the project root folder.{ "name": "your-project-name", "version": "1.0.0" }
Create a gulpfile.js
Create a gulpfile.js at the root of your project:
var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here });
Run Gulp
To run the default task:
gulp
To run a specific task:
gulp minify
Minify CSS
To minify your styles use the gulp-minify-css plugin.
- Install Minify Css
npm install gulp-minify-css --save-dev
- Append to
gulpfile.js
:var minyfyCss = require('gulp-minify-css'); gulp.task('minify', function() { return gulp.src('src/css/*.css') .pipe(minyfyCss()) .pipe(gulp.dest('assets/css')); });
Compress Javascript
To minify your scripts use the gulp-uglify plugin.
- Install UglifyJS
npm install gulp-uglify --save-dev
- Amend the gulpfile.js:
var uglify = require('gulp-uglify'); gulp.task('compress', function() { return gulp.src('src/js/*.js') .pipe(uglify()) .pipe(gulp.dest('assets/js')); });
Compile LESS
To compile your less files to css use the gulp-less plugin.
- Install Less for Gulp
npm install gulp-less --save-dev
- Append to
gulpfile.js
:var less = require('gulp-less'); gulp.task('less', function() { return gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('src/css')); });
File watcher
To watch for changes use the gulp-watch plugin.
- Install file watcher for Gulp
npm install gulp-watch --save-dev
- How to use gulp watch
var watch = require('gulp-watch'); gulp.task('less', function() { return gulp.src('src/less/*.less') .pipe(watch('src/less/*.less')) .pipe(less()) .pipe(gulp.dest('src/css')); });
Full example
The final version of package.json
:
{ "name": "your-project-name", "version": "1.0.0", "devDependencies": { "gulp": "^3.9.0", "gulp-less": "^3.0.5", "gulp-minify-css": "^1.2.3", "gulp-uglify": "^1.5.1", "gulp-watch": "^4.3.5" } }
The final version of gulpfile.js
:
var gulp = require('gulp'); var less = require('gulp-less'); var watch = require('gulp-watch'); var uglify = require('gulp-uglify'); var minifyCss = require('gulp-minify-css'); gulp.task('default', ['compress', 'minify', 'less'], function () { }); gulp.task('less', function() { return gulp.src('src/less/*.less') .pipe(watch('src/less/*.less')) .pipe(less()) .pipe(gulp.dest('src/css')); }); gulp.task('minify', function() { return gulp.src('src/css/*.css') .pipe(watch('src/css/*.css')) .pipe(minifyCss()) .pipe(gulp.dest('assets/css')); }); gulp.task('compress', function() { return gulp.src('src/js/*.js') .pipe(watch('src/js/*.js')) .pipe(uglify()) .pipe(gulp.dest('assets/js')); });
Conclusion
Using a build system as Gulp can boost your performance with task automation as like as minify CSS, uglify javascript, compile LESS/SASS.
Have questions about task automation with gulp.js? Leave a comment below with your thoughts and don't forget to share this blog post.
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed