Gulp常用脚本

js 压缩合并

gulp = require "gulp"
jshint = require "gulp-jshint"
concat = require "gulp-concat"
uglify = require "gulp-uglify"

gulp.task "script", ->
    gulp.src ["xxx", "yyy"]
    .pipe jshint()
    .pipe concat "base.min.js"
    .pipe uglify()   # 混淆
    .pipe gulp.dest "输出目录"

js 压缩不合并

gulp = require "gulp"
jshint = require "gulp-jshint"
rename = require "gulp-rename"
uglify = require "gulp-uglify"
sourcemaps = require "gulp-sourcemaps"

gulp.task "script", ->
    gulp.src ["xxx.js", "!xxx.min.js", "yyy.js", "!yyy.min.js"]
    .pipe sourcemaps.init()
    .pipe jshint()
    .pipe rename
        extname: ".min.js"
    .pipe uglify
        mangle: no  # 不混淆
    .pipe sourcemaps.write "./"
    .pipe gulp.dest "./"

js 压缩加版本号

path = require "path"
gulp = require "gulp"
plumber = require "gulp-plumber"
jshint = require "gulp-jshint"
rename = require "gulp-rename"
uglify = require "gulp-uglify"
rev = require "gulp-rev"

gulp.task "script", ->
    gulp.src ["xxxx.js", "!xxx.min.js"]
    .pipe plumber()
    .pipe jshint()
    .pipe rename
        extname: ".min.js"
    .pipe uglify
        managle: no
    .pipe rev()          # 加版本号
    .pipe gulp.dest "压缩文件"
    .pipe rev.manifest   # 这部分解决 js html 同时压缩时映射文件被覆盖问题
        path    : path.join __dirname, "映射文件目录/#{appName}/rev-manifest.json"
        cwd     : path.join __dirname, "映射文件目录"
        merge   : yes
    .pipe gulp.dest "版本文件输出目录"

css 压缩合并

gulp = require "gulp"
rename = require "gulp-rename"
cssImport = require "gulp-cssimport"
cssmin = require "gulp-cssmin"

gulp.task "css", ->
    gulp.src ["xxx", "yyy"]
    .pipe rename
        extname: ".min.css"
    .pipe cssImport()
    .pipe cssmin
        compatibility: "ie7"
    .pipe gulp.dest "输出目录"

html 压缩

gulp = require "gulp"
plumber = require "gulp-plumber"
htmlmin = require "gulp-htmlmin"
rename = require "gulp-rename"

gulp.task "html", ->
    options =
        removeComments                  : false     # 清除HTML注释
        collapseWhitespace              : true      # 压缩HTML
        collapseBooleanAttributes       : true      # 省略布尔属性的值 <input checked="true"/> ====> <input />
        removeEmptyAttributes           : true      # 删除所有空格作属性值 <input id="" /> ====> <input />
        removeScriptTypeAttributes      : true      # 删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes   : true      # 删除<style>和<link>的type="text/css"
        minifyJS                        : true      # 压缩页面JS
        minifyCSS                       : true      # 压缩页面CSS

    gulp.src ["xxx/**/*.html", "!xxx/**/*.min.html"]
    .pipe plumber()  # 出错不跳出
    .pipe htmlmin options
    .pipe rename
        extname: ".min.html"
    .pipe gulp.dest "输出目录"

html 压缩加版本号

path = require "path"
gulp = require "gulp"
plumber = require "gulp-plumber"
htmlmin = require "gulp-htmlmin"
rename = require "gulp-rename"
rev = require "gulp-rev"

gulp.task "html", ->
    options =
        removeComments                  : false     # 清除HTML注释
        collapseWhitespace              : true      # 压缩HTML
        collapseBooleanAttributes       : true      # 省略布尔属性的值 <input checked="true"/> ====> <input />
        removeEmptyAttributes           : true      # 删除所有空格作属性值 <input id="" /> ====> <input />
        removeScriptTypeAttributes      : true      # 删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes   : true      # 删除<style>和<link>的type="text/css"
        minifyJS                        : true      # 压缩页面JS
        minifyCSS                       : true      # 压缩页面CSS

    gulp.src ["xxx/**/*.html", "!xxx/**/*.min.html"]
    .pipe plumber()  # 出错不跳出
    .pipe htmlmin options
    .pipe rename
        extname: ".min.html"
    .pipe rev()
    .pipe gulp.dest "压缩文件输出目录"
    .pipe rev.manifest
        path    : path.join __dirname, "映射文件输出目录/rev-manifest.json"
        cwd     : path.join __dirname, "映射文件输出目录"
        merge   : yes
    .pipe gulp.dest "版本文件输出目录"

基本上平时会用到的功能都覆盖到了，高级用法控制文件流的找时间再整理整理