前端构建工具gulp之实际应用

Posted 2020-07-17 wjmm

1.gulp的API介绍

　　gulp.task(name[, deps], fn)    ------   定义要实现的任务

　　name：必选，任务名称，自定义名称，不过注意名称中不要使用空格；

　　deps：可选，一个包含任务列表的数组，在当前任务之前执行的任务，必须使用正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream；

　　fn： 必选，当前任务要执行的操作

　　gulp.src(globs[, options])  -------   输出符合匹配模式或者匹配模式数组的文件

　　glpbs：必选，匹配模式或者匹配模式数组

　　options：可选，通过 glob-stream 所传递给 node-glob 的参数

　　gulp.dest(path[, options])  -------   写文件并重新输出数据

　　path：必选，文件将被写入的路径，也可以传入一个函数，在函数中返回相应路径，如果文件夹为空，将会自动创建

　　options：可选，输出目录的cwd参数和权限设置(mode)

　　gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])   --------   用于监控文件的变化

　　glob：必选，一个 glob 字符串，或者一个包含多个 glob 字符串的数组，指定具体监控的文件

　　opts：可选，传给gaze的参数

　　tasks：必选，在文件变动后执行的一个或者多个创建的任务名称

　　cb(event)：可选，每次变动执行的方法；event.type为发生的变动类型（added, changed 或者 deleted），event.path为触发该事件的文件路径

2.gulp的实际应用

　   匹配符 *、**、！、{}

gulp.src(‘./js/*.js‘) // * ------  匹配js文件夹下所有.js格式的文件
gulp.src(‘./js/**/*.js‘)   // **  ------  匹配js文件夹的0个或多个子文件夹
gulp.src([‘./js/*.js‘,‘!./js/main.js‘])    // ! ------  匹配除了main.js之外的所有js文件
gulp.src(‘./js/**/{test,index}.js‘)   // {} -------  匹配{}里的文件名

　　css压缩 

　　安装插件：   npm install gulp-minify-css --save-dev 和  npm install  gulp-make-css-url-version --save-dev

var gulp = require(‘gulp‘),
　　 cssver = require(‘gulp-make-css-url-version‘), //给css文件里引用url加版本号
    cssmin = require(‘gulp-minify-css‘);
/*css压缩*/
gulp.task(‘cssmin‘,function(){
     gulp.src([‘./wmmproject/css/*.css‘,‘!./wmmproject/css/common.css‘])
         .pipe(cssver())  //给css文件里引用文件加版本号（MD5）
         .pipe(cssmin({
               advanced:false, //是否开启高级优化（合并选择器）默认为true
               compatibility:‘ie7‘, //保留ie7以及一下兼容写法 默认为"*"兼容模式
               keepBreaks: true, //是否保留换行，默认为false
               keepSpecialComments: ‘*‘ //保留所有特殊前缀，如果不加，有可能将会删除你的部分前缀

         }))
         .pipe(gulp.dest(‘./wmmproject/dist/css‘));
}) 

　　js压缩   

　　安装插件：   npm install gulp-uglify --save-dev   和   npm install gulp-rename --save-dev

var gulp = require(‘gulp‘),
  　rename = require(‘gulp-rename‘),//重命名
    uglify = require(‘gulp-uglify‘);//js压缩　　

gulp.task(‘jsmin‘,function(){
　　gulp.src(‘./wmmproject/js/*.js‘)
　　　　.pipe(uglify({
　　　　　　mangle: true, //是否修改变量名，默认为true
　　　　　　compress: true//是否完全压缩，默认为true
　　　　}))
　　　　.pipe(rename({suffix:‘.min‘})) //重命名
　　　　.pipe(gulp.dest(‘./wmmproject/dist/js‘));
})

　　html压缩

　　安装插件：   npm install gulp-htmlmin --save-dev   和    npm install gulp-rev-append --save-dev 

var gulp = require(‘gulp‘),
      htmlmin = require(‘gulp-htmlmin‘);//html压缩
gulp.task(‘htmlmin‘,function(){
      gulp.src(‘./wmmproject/demo/*.html‘)
          .pipe(htmlver())   //html内的文件后必须加入?rev=
          .pipe(htmlmin({
                removeComments: true,//清除HTML注释
                collapseWhitespace: true,//压缩HTML
                collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="checked"/> ==> <input  checked/>
                removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
                minifyJS: true,//压缩页面JS
                minifyCSS: true//压缩页面CSS
          }))
          .pipe(gulp.dest(‘./wmmproject/dist/demo‘))
})

　　image压缩    

　　安装插件：   npm install gulp-imagemin --save-dev

var gulp = require(‘gulp‘),
     imgmin =  require(‘gulp-imagemin‘);
gulp.task(‘imagemin‘,function(){
      gulp.src(‘wmmproject/images/*jpg‘)
          .pipe(imgmin({
              optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
              progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
              interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
              multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
          }))
          .pipe(gulp.dest(‘wmmproject/dist/images‘))
})

　　文件合并 

　　安装插件：   npm install gulp-concat --save-dev

var gulp = require(‘gulp‘),
     concat = require(‘gulp-concat‘);
gulp.task(‘concat‘,function(){
      gulp.src([‘wmmproject/js/flexible.js‘,‘wmmproject/js/normal.js‘])
          .pipe(concat(‘all.js‘))//合并后的文件名
          .pipe(gulp.dest(‘wmmproject/dist/js/‘))
})

　　js检查

　　安装插件：   npm install gulp-jshint   jshint  --save-dev

      首先在package.json内配置如下：

"jshintConfig":{
    "undef":true,
    "unused":true,
    "predef": [ "MY_GLOBAL", "ads" ] 
  }

　　参数配置说明如下：

　　

var gulp = require(‘gulp‘),
     jshint = require(‘gulp-jshint‘);

gulp.task(‘jshint‘,function(){
      gulp.src(‘wmmproject/js/*.js‘)
          .pipe(jshint())
          .pipe(jshint.reporter(‘default‘))
})

 　　雪碧图

  　  安装插件：   npm install gulp.spritesmith  --save-dev

var gulp=require(‘gulp‘);  
    spritesmith=require(‘gulp.spritesmith‘); 
gulp.task(‘sprite‘,function(){  
     gulp.src(‘wmmproject/images/*.png‘)  
        .pipe(spritesmith({  
            imgName:‘wmmproject/images/sprite.png‘, //生成图的名称 
            cssName:‘wmmproject/css/sprite.css‘,  //对应生成的css文件 
            padding:5,  //合成时两个图片的间距
            algorithm:‘binary-tree‘ //图片排列布局，有四个可选值，分别为top-down、left-right、diagonal、alt-diagonal、binary-tree 
        }))  
        .pipe(gulp.dest(‘wmmproject/css‘))  
})