gulp的插件应用

作者: 北漂老莫 | 来源:发表于2016-03-17 10:48 被阅读103次

gulp的插件应用
编写gulp插件
gulp压缩合并文件
gulp之插件、监控、api使用
gulp的简单使用
gulp 配置及插件体系
gulp--自动化构建工具
gulp入门
gulp资源整理
Gulp-Todo

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