Last active
July 11, 2016 20:20
-
-
Save tcarlsen/3ff4c9032f55e4ab1358 to your computer and use it in GitHub Desktop.
My personally gulp file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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']); |
this is no longer maintained
has moved to a yeoman generator https://github.com/tcarlsen/generator-cojasa
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))
;
};
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
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 developinggulp 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: