Gulp常用脚本

Posted by Sir0xb on 2016-01-26 14:20:38 +0800

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 "版本文件输出目录"

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


Copyright © 2022, Built with Gatsby