Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My personally gulp file
/*jslint indent:2, node:true, sloppy:true*/
var
gulp = require('gulp'),
coffee = require('gulp-coffee'),
rename = require("gulp-rename"),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
styl = require('gulp-styl'),
concat = require('gulp-concat'),
csso = require('gulp-csso'),
imagemin = require('gulp-imagemin'),
header = require('gulp-header'),
cleanhtml = require('gulp-cleanhtml'),
changed = require('gulp-changed'),
googlecdn = require('gulp-google-cdn'),
gulpif = require('gulp-if'),
jade = require('gulp-jade'),
livereload = require('gulp-livereload'),
pkg = require('./package.json');
var banner = [
'/**',
' ** <%= pkg.name %> - <%= pkg.description %>',
' ** @author <%= pkg.author %>',
' ** @version v<%= pkg.version %>',
' **/',
''
].join('\n');
var build = false;
var dest = 'app';
/* Scripts */
gulp.task('scripts', function () {
return gulp.src('src/**/*.coffee')
.pipe(gulpif(!build, changed(dest)))
.pipe(coffee())
.pipe(gulpif(build, uglify()))
.pipe(concat('scripts.min.js'))
.pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest(dest))
.pipe(livereload());
});
/* Styles */
gulp.task('styles', function () {
return gulp.src('src/**/*.scss')
.pipe(gulpif(!build, changed(dest)))
.pipe(sass())
.pipe(styl())
.pipe(csso())
.pipe(concat('styles.min.css'))
.pipe(header(banner, {pkg: pkg}))
.pipe(gulp.dest(dest))
.pipe(livereload());
});
/* Dom elements */
gulp.task('dom', function () {
return gulp.src('src/**/*.jade')
.pipe(gulpif(!build, changed(dest)))
.pipe(jade({pretty: true}))
.pipe(gulpif(build, cleanhtml()))
.pipe(rename({dirname: '/partials'}))
.pipe(gulp.dest(dest))
.pipe(livereload());
});
/* Images */
gulp.task('images', function () {
return gulp.src('src/images/**')
.pipe(gulpif(!build, changed('app/img')))
.pipe(imagemin())
.pipe(gulp.dest(dest + '/img'))
.pipe(livereload());
});
/* Watch task */
gulp.task('watch', function () {
gulp.watch('src/**/*.coffee', ['scripts']);
gulp.watch('src/**/*.scss', ['styles']);
gulp.watch('src/**/*.jade', ['dom']);
gulp.watch('src/images/**', ['images']);
});
/* Build task */
gulp.task('build', function () {
build = true;
dest = 'build';
gulp.start('scripts', 'styles', 'dom', 'images');
});
/* Default task */
gulp.task('default', ['scripts', 'styles', 'dom', 'images', 'watch']);
@tcarlsen

This comment has been minimized.

Copy link
Owner Author

@tcarlsen tcarlsen commented May 22, 2014

This is my personally standard gulpfile, that I use as an starting point whenever I start a new web project!

Commands:

  • gulp wich will run the default task and create a app directory and start watching your src directory, this is want you should run while developing
  • gulp build this command will basically do the same as the default but your files will be minimised and it will try to replace all your bower component refs to cdn ones.

Installation:

$ git clone https://gist.github.com/3ff4c9032f55e4ab1358.git
$ npm install gulp gulp-changed gulp-cleanhtml gulp-coffee gulp-concat gulp-csso gulp-google-cdn gulp-header gulp-if gulp-imagemin gulp-jade gulp-livereload gulp-sass gulp-styl gulp-uglify tiny-lr
@tcarlsen

This comment has been minimized.

Copy link
Owner Author

@tcarlsen tcarlsen commented Oct 29, 2014

this is no longer maintained

has moved to a yeoman generator https://github.com/tcarlsen/generator-cojasa

@AliMD

This comment has been minimized.

Copy link

@AliMD AliMD commented Mar 15, 2015

nice but no error reporting
suggesting to add something like this

var plumber = require('gulp-plumber');

var logErrors = function (error)
{
  gutil.log(
    gutil.colors.bgRed(' Error (' + error.plugin + '): ' + error.message + ' ')
    +'\n           '+
    gutil.colors.bgRed(' file: ' + error.fileName + ' ')
    +'\n           '+
    gutil.colors.bgRed(' line: ' + error.lineNumber + (error.column ? ', column: ' + error.column : '') + ' ')
  );
  // gutil.log(error);
};

/**
 * backup orginal gulp.src
 * @type {[type]}
 */
var gulp_src = gulp.src;

/**
 * inject plumber and logErrors in all tasks
 */
gulp.src = function ()
{
  return gulp_src
  .apply(gulp, arguments)
  .pipe(plumber(logErrors))
  ;
};
@AliMD

This comment has been minimized.

Copy link

@AliMD AliMD commented Mar 15, 2015

and for sass better error reporting and prevent to watch stoped

/**
 * show errors in customized style
 * @param  {Object} error gulp error object
 */
var logSassErrors = function (error)
{
  logErrors({
    plugin: 'gulp-sass',
    message: error.message,
    fileName: error.file,
    lineNumber: error.line,
    column: error.column
  })
};


...
 .pipe(sass({
    // errLogToConsole: true
    onError: logSassErrors
  }))
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment