gulp有很多可以应用的插件,可以利用这些插件配置一些基础任务,包括编译coffee, jade, less等,压缩html, image, css等,启动开发者模式(gulp-webserver livereload)等等
1.gulp-load-plugins
plgn = require('gulp-load-plugins')()
# usage
gulp.task 'coffee', ->
gulp.src('coffee/**/*.coffee')
.pipe(plgn.coffee())
.dest('js/')
2.gulp-webserver
Start a local web server
# usage
gulp.task 'webserver', ->
gulp.src '/public'
.pipe plgn.webserver
livereload: true
open: true
3.gulp-rev && gulp-rev-collector
gulp-rev
static asset revisioning by appending content hash to filenames
gulp-rev-collector
Static asset revision data collector from mainfests, generated from different streams, and replace their links in html template.
# usage
gulp.task 'minCSS', ['less'], ->
gulp.src "#{paths.publicDirCSS}/main.css"
.pipe plgn.minifyCss()
.pipe plgn.rev()
.pipe gulp.dest "#{paths.distDir}/css/"
.pipe plgn.rev.manifest()
.pipe gulp.dest "#{paths.revDir}/css"
gulp.task 'revision', ['minJS', 'minCSS', 'minHTML'], ->
gulp.src ["#{paths.revDir}/**/*.json", "#{paths.distDir}/**/*.html"]
.pipe plgn.revCollector()
.pipe gulp.dest "#{paths.distDir}"
4.gulp-main-bower-files
gulp.task 'copyBower', ->
gulp.src('./bower.json')
.pipe plgn.mainBowerFiles
overrides:
bootstrap:
main: [
'./dist/js/bootstrap.js',
'./dist/css/*.min.css',
'./dist/fonts/*.*'
]
.pipe plgn.if '*.js', plgn.uglify()
.pipe plgn.if '*.css', plgn.minifyCss()
.pipe gulp.dest "#{paths.distDir}/bower_components/"
5.wiredep
gulp.task 'jade', ['removeHTML'], ->
gulp.src paths.jade
.pipe plgn.plumber
errorHandler: plgn.notify.onError "Jade error: <%= error.message %>"
.pipe wiredep
overrides:
bootstrap:
main: [
'./dist/js/bootstrap.js',
'./dist/css/*.min.css',
'./dist/fonts/*.*'
]
optional: 'configuration'
goes: 'here'
# files after compiled are in public/,but files after builded are in dist/
# ./public/bower_components/**/*.css
# it should be ./bower_components/**/*.css
ignorePath: paths.publicDir
# src: "#{paths.public}/index.html"
.pipe plgn.jade
pretty: true
.pipe gulp.dest paths.publicDir