Gulp - TwoGears/hakomo-guides GitHub Wiki

A tool for automating different front-end tasks like concatenating, minifying, compiling sass, etc.

Getting started

1. Install Gulp globally:

npm install -g gulp

If you dont have package.json already in your root directory, you need to run:

npm init

Keep hitting enter till it is completed

put in .gitignore the following line:

node_modules

Ignore node_modules in sublime: Command Palette...> Edit project and add the folder_exclude_patterns. Should look like that:

{
    "folders":
    [
        {
            "path": "180franklin",
            "folder_exclude_patterns":
                [
                    "node_modules"
                ]
        }
    ]
}

2. Install Gulp in the project:

Go to you project root folder

npm install gulp browser-sync del gulp-autoprefixer gulp-di gulp-minify-css gulp-rename gulp-sass --save-dev

3. Create gulpfile.js in the same folder. That's where the tasks are going to be defined:

// Put this in gulpfile.js
var gulp = require('gulp');

gulp.task('default', []);

4. Run gulp

Type gulp in the console. This is going to run default task, which does nothing at the moment.

5. Installing plugins

npm install plugin-name --save-dev

Then in your gulpfile.js

var gulp = require('gulp');
...
var plugin = require('plugin-name');
...

6. API

  • gulp.src
    Returns a stream from a file source that can be piped to plugins
gulp.src('js/app/*.js')
    pipe(minify())
    pipe(gulp.dest('somewhere'))
  • gulp.dest
    Writes files to the specified destination. Can be used multiple times to move to different folders

gulp.src('*.css')
    pipe(gulp.dest('a-folder/somewhere'))
    pipe(autoprefxr())
    pipe(gulp.dest('another/folder'))
  • gulp.task
    Define tasks. Can be run manually from CLI by: $ gulp -taskname-
gulp.task('taskName', [ 'dependency tasks...' ], function() {
   return gulp.src('something.js')
       pipe(plugin1())
       pipe(plugin2())
       ...
}
  • gulp.watch
    Watch files and do something when a file changes.
var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

6. Example file

7. MOAR