Gulp is amazing and speeds up my development flow in bigger projects.

Here are the scripts I use with LESS and JavaScript.

 Requirements for gulp

  • install nodejs
  • install npm
  • install gulp globally
  • install gulp locally

Problems installing gulp within a vagrant sync_folder? Getting lots of error messages?

Try the following flags:

npm install gulp --save-dev --no-bin-links
npm install gulp-[pluginname] --save-dev --no-bin-links

Cheatsheet

https://github.com/osscafe/gulp-cheatsheet

LESS task: concat, compile, autoprefix, replace, minify

Required packages for this task:

npm install gulp-concat gulp-less gulp-minify-css gulp-postcss autoprefixer-core gulp-replace --save-dev

My personal helper function:

var gulp = require('gulp');
var concat = require('gulp-concat');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer-core');
var replace = require('gulp-replace');

var processLess = function(src, dest, filename) {
  return gulp.src(src)
    .pipe(concat(filename))
    .pipe(less())
    .pipe(postcss([autoprefixer]))
    .pipe(minifyCSS())
    .pipe(replace("old/path/", "../new/path/"))
    .pipe(gulp.dest(dest));
};

The task:

var srcStyles = [
  "./src/normalize.css",
  "./src/style.less"
];

gulp.task("styles", function() {
  return processLess(srcStyles, "./build/", "styles.min.css");
});

gulp.task('default', function() {
  gulp.start('styles');
  gulp.watch(srcStyles, ['styles']);
});

JavaScript task: concat, uglify

Required packages for this task:

npm install gulp-concat gulp-sourcemaps gulp-uglify --save-dev

My personal helper function:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

var processJs = function(src, dest, filename) {
  return gulp.src(src)
    .pipe(sourcemaps.init())
    .pipe(concat(filename))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(dest));
};

The task:

var srcJs = [
  './src/modules/*.js',
  './src/main.js'
];

gulp.task("js", function() {
  return processJs(srcJs, "./build/", "main.min.js");
});

gulp.task('default', function() {
  gulp.start('js');
  gulp.watch(srcJs, ['js']);
});