Gulp is a Task / Build runner. It's easy to use, has a simple api, and is efficient. Gulp.js makes use of pipes for streaming data that needs to be processed.
But as designer you don't actually need to know any of that. What you do need to know is that Gulp will make your life much easier.
This tutorial will setup Gulp to do 3 things:
- Compress js
- Compile less
- Browser livereload
npm install --global gulp
You'll probably need to sudo
this one.
npm install --save-dev gulp
npm install --save-dev gulp-less
npm install --save-dev gulp-uglify
npm install --save-dev gulp-plumber
npm install browser-sync gulp --save-dev
On the root of your project create a .js file name gulpfile.js
, and paste this snippet
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
less = require('gulp-less'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
// Uglyfies js on to /minjs
gulp.task('scripts', function(){
gulp.src('js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("minjs"));
});
// Compiles less on to /css
gulp.task('less', function () {
gulp.src('less/**/*.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(reload({stream:true}));
});
// reload server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
// watch for changes on files
gulp.task('watch', function(){
gulp.watch('js/*.js', ['scripts']);
gulp.watch('less/*.less', ['less']);
gulp.watch("*.html", ['bs-reload']);
});
// deploys
gulp.task('default', ['scripts', 'less','browser-sync','watch']);
Open terminal and run gulp
!
gulp
And now the magic starts. This will do:
- Compress .js files on /js folder and store them on /minjs
- Compile .less files on /less folder and create a .css file on /css
- Open a browser with your index.html
- Watch for changes on your js file and compress it every time you save it
- Watch for changes on your less file and compile it every time you save it
- Auto reload the browser every time the less file is updated.
There are also Gulp plugins for Sass or Stylus and with little changes on this code you can implement them.
There is nothing much to add, just rember to do changes on less and never edit the css file and you'll be fine.