Gulp guide for designers

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

Installing gulp and gup plugins

1. Install gulp globally:

npm install --global gulp

You'll probably need to sudo this one.

2. Install gulp in your project devDependencies:

npm install --save-dev gulp

3. Install gulp less plugin

npm install --save-dev gulp-less

4. Install gulp uglify plugin for js

npm install --save-dev gulp-uglify

5. Install gulp plumber to output errors

npm install --save-dev gulp-plumber

5. Install gulp browsersync for live reload

npm install browser-sync gulp --save-dev

Create gulpfile.js

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']);

Run gulp!

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.

Enjoy!

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.

andresgalante/gulpsetup.md