gulp的插件应用

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,483评论 1 32
  • 对于前端而言,Gulp实在是一个很酷且不可多得的存在;先前就有在Gulp探究折腾之路(I),以及Gulp折腾之路(...
    晚晴幽草阅读 1,436评论 0 6
  • gulp作为前端构建项目的一个工具,自己理解gulp主要方面的作用:1.构建本地服务器。2.快速构建项目。3.对代...
    张宪宇阅读 1,216评论 0 2
  • Pines Cheng’s Blog awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致...
    大前端之路阅读 2,311评论 0 12
  • 遇到的问题 服务器端静态资源更新,客户端有缓存,未能获取到最新的静态资源,导致前端效果未达到预期。 期望 服务器端...
    陈龙_4923阅读 2,553评论 0 1