Gulp

gulp是基于NodeJs环境的一个构建工具，用来进行项目构建，处理如压缩js代码，转化less文件等任务，需要进行全局安装

npm install gulp -g

gulp实现不同的构建任务是通过其它插件来执行，gulp负责调用这些插件，可以简单理解为，gulp就是插卡游戏机，负责操作，如果想要不同的游戏那么需要换不同的卡带

图片1.png

需要注意，在使用gulp时需要将gulp下载到本地文件，同时下载gulp对应的插件，必须在本地新建文集gulpfile.js，名字是固定的，然后在文件内配置gulp

解析Less

1. 需要在本地安装gulp，在当前文件夹执行命令

   npm install gulp
   

   注意安装完成后再本地目录会有一个node_modules文件来存放node的文件

2. 在本地安装gulp-less插件

   npm install gulp-less
   

3. 在gulpfile.js文件中进行配置

   var gulp=require("gulp"); //引入gulp文件，此时我们定义的gulp就转换为了一个对象，有gulp对应的方法
   
   var less=require("gulp-less"); //引入gulp-less文件，同上
   
   gulp.task("less2css",function(){ //通过.task来配置方法，less2css使我们定义的任务名
   
    gulp.src('./less/*.less')  //引入要转化的less文件，可以传入正则
        .pipe(less())  
        //pipe作用等同于管道符，将上一次的输入结果作为下一的输出，在这里将我们获取到的less文件传给less()函数处理
        .pipe(gulp.dest('./css'))
        //保存转换完成后的文件到指定的文件夹，如果该文件夹不存在那么会新创建一个
   })
   

4. 在git中执行本次任务

   gulp less2css
   

5. 完成后再当前目录会有一个css文件夹，内部就是我们转化后的css文件

相关插件

Less解析

gulp-less

压缩CSS

gulp-cssmin

压缩JS

gulp-uglify

gulp.task("uglify",function(){
    gulp.src("./js/*")
        .pipe(uglify())
        .pipe(gulp.dest("./release/js"))
})

添加前缀

gulp-autoprefixer

相同的一个文件对不同插件的使用是可以写在一个task命令下的

var gulp=require("gulp"); //引入gulp文件

var less=require("gulp-less"); //引入gulp-less文件，同上

var cssmin=require("gulp-cssmin"); //引入压缩css插件

gulp.task("less2css",function(){ 

    gulp.src('./less/*.less') 
        .pipe(less())  
        .pipe(cssmin())
        .pipe(gulp.dest('./css'))
        //先将代码转化为css格式然后将代码进行压缩后输出
})

gulp-autoprefixer是可以进行配置的

gulp.task("less2css",function(){ 
    gulp.src('./less/*.less') 
        .pipe(less())  
        .pipe(autoprefixer({
          browsers:['last 2 versions','Firefox >= 20'],//为什么版本的浏览器添加，可以选择，参数可以百度
          cascade:true,//是否美化，默认是true,效果如下
                       //-webkit-transform: rotate(45deg);
                       //        transform: rotate(45deg);
          remove:true  //是否删除不必要的前缀，默认为true
        }))
        .pipe(cssmin())
        .pipe(gulp.dest('./css'))
        //将代码转化为css格式然后为代码添加前缀后将代码进行压缩后输出
})

图片压缩

gulp-imagemin

gulp.task("image",function(){
    gulp.src(["./images/**/*","./img/*"],{base:"./"})
    //src中可以传入2个参数，第一个参数可以是单独的字符串，也可以是数组，如果是多个文件夹下都有图片需要进行压缩，那么直接将这些文件夹路径传入即可，当然也可以写正则
    //第二个参数可以写一个对象，对象中可以对src进行配置，主要了解base属性，该属性是用来声明在我们使用dest命令时如何存储经过操作的文件，如上，base赋值./代表gulp在存储的时候会去掉src中传入地址中的./,将剩余的部分拼接在dast路径上，如果我们在src中传入数组，那么会依次执行上述操作
        .pipe(imagemin())
        .pipe(gulp.dest("./release"))
})

代码合并

gulp-concat

gulp.task("concat",function(){
    gulp.src(["./css/index.css","./css/cart.css"]) //导入要合并的文件
    .pipe(concat("all.css")) //执行合并操作，all.css是我们为合并后的文件起的名字
    .pipe(cssmin()) //将合并后的文件进行压缩
    .pipe(gulp.dest("./release/css"))
})

压缩HTML

gulp-htmlmin

注意，该命令必须传入参数，否则没有效果

gulp.task("html",function(){
    gulp.src("./index.html")
        .pipe(htmlmin({
            removeComments: true,//清除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
        }))
        .pipe(gulp.dest("./release"))
})

添加版本号

gulp-rev

这里说一下浏览器的缓存机制，方便我们来加深理解，浏览器本身是会有缓存机制的，在第一次访问服务器的时候将文件下载到本地缓存起来，如果在下一次向服务器发送请求的时候发现文件的请求路径没有发生变化，那么就不从服务器请求，而是直接获取本地的缓存，这样就能够提升用户下一次打开页面时的速度，同时也会减小对服务器的压力，但是同时也会产生一个问题，如果我们在第一次提交的时候出现了BUG或者后期我们对JS或其他文件进行了更改，浏览器在加载页面时发现文件地址没有变化，那么它仍然会从缓存中获取文件，那么就会导致我们修改的部分不能反馈到用户的电脑上，所以我们在更改文件后要及时的改变文件的请求路径，来让浏览器重新下载我们的文件，在早期我们一直使用的是时间戳，也就是在url的地址后加一个当前的时间来让浏览器认为地址发生了改变继而来重新请求，时间戳一般设为一天

url:"....?new Date().getDate()"

但是这样也会有一个问题，如果我们一天之内出现了两个BUG，那么我们需要在一天之内两次修改文件，那么这个时间戳是不起作用的，但如果设置到秒，用户每一次请求都会重新加载，影响加载速度，所以最好的方法是我们能够合理的利用缓存，在我们修改了文件之后再重新加载，gulp为我们提供了解决的方案，就是添加版本号的插件，它会为我们文件添加一个字符，在我们内容改变的时候，字符也会改变，这就相当于改变了我们文件的地址路径，浏览器就会重新加载我们的文件，配合重命名插件一起使用

重命名

gulp-rename

gulp.task("uglify",function(){
    gulp.src("./js/*")
        .pipe(uglify())
        .pipe(rev()) //调用rev插件
        .pipe(gulp.dest("./release/js")) //将添加版本号后的文件进行存储
        .pipe(rev.manifest()) //用manifest命令来生成一个json文键储存每个文件版本号变化之后与之前的对应关系
        .pipe(rename("js-manifest.json")) //由于gulp-rev默认生成的json文件名都是相同的，会出现覆盖，所以需要                                          使用gulp-rename插件对每一个进行重命名
        .pipe(gulp.dest("./release/js/rev")) //将json文件存放发到该路径下
})

这里我们说一下gulp-rev的大概思路，在我们使用MD5加密的时候都知道MD5有一个特性，不管文件内容的大小，都会统一转换为一个32位的字符，如果内容不发生变化的时候，字符不会发生改变，但是如果内容发生改变，那么就会生成新的字符，由MD5这个特性，我们可以将文件内容通过MD5直接加密，然后将加密后的字符添加在我们文件名字的结尾，在内容改变时，名字也就不同

gulp-useref和gulp-if

这两个命令比较有意思，可以配合一起使用

使用gulp-useref前，需要在HTML页面中写入标记

    <!-- build:css ./all.css -->
    <!-- build是开头的固定写法，如果要合并的是css文件，那么：后写css，是js文件写js，,./all.css表示的是合并后存储的路径以及合并后的名称-->
    <link rel="stylesheet" href="./css/a.css">
    <link rel="stylesheet" href="./css/b.css">
    <!-- endbuild -->
    <!--endbuild是结尾的固定写法，这两个注释就是userf的标示，表示这两者之间的代码要合并-->

接着在gulpfile.js中写入命令

gulp.task('useref', function () {
    gulp.src('./index.html') //src中写入的是做了标记的HTML页面的地址
        .pipe(useref())
        .pipe(gulpif('*.js', uglify())) //gulp-if的作用是过滤文件，比如这里，它会把以js结尾的文件过滤出来，然                                        后调用uglify命令，将这部分代码进行压缩
        .pipe(gulp.dest('./release/view'));
});

gulp-userf还有删除文件的功能，例如我们在最后项目上线的时候，是不需要页面中的less.js的，所以我们需要将其删除

<!-- build:remove -->
<script src="./public/libs/less.js"></script>
<!-- endbuild -->

内容替换

gulp-rev- collector

用来将经过rev设定版本号以后页面中引入文件的名字替换原来的文件名

gulp.task('revCollertor', ['css', 'image', 'useref'], function () { //将之前的image等命令作为依赖注入到rev命令中，在rev命令执行之前先执行这些命令
    gulp.src(['./release/rev/*.json', './release/*.html', './release/views/*.html'], {base: './release'}) //[]中第一个参数是rev下的json文件，里面存储文件的对应关系，后面的参数分别是我们需要做替换的文件
        .pipe(revCollector())
        .pipe(gulp.dest('./release'));//存储到release文件下
});

注意在我们将less文件转化为css格式之后，页面中我们写的less名字需要在合并时改为.css的格式，否则在内容替换的时候gulp不能正确对应并更换

其他任务

对于一些不需要我们构建的任务，例如后台的代码，我们只需要将它们整体传入到release文件夹下即可

gulp.task('other', function () {
    
    gulp.src(['./api/*', './public/*(fonts|libs)/*'], {base: './'})
        .pipe(gulp.dest('./release'));

});

整体执行

在我们项目构建完成后，我们可已将所有的命令作为依赖注入到一个命令中，方便以后我们再次构建，再一次构建的时候只需要执行这个命令，而不需要将所有的命令都重复执行

gulp.task("release",["revController","ourther"]); //之前我们已经将其他命令注入到revController中，所以不需要                                                  重复传递了

gulp接口

task

在task中可以传入3个参数，分别是任务名称，任务依赖，以及执行任务的callback

gulp.task("revCollertor",["image","css"],function(){
  // gulpr任务的执行是异步操作，有可能在我们rev下的json文件还没有生成的情况下替换任务就已经开始了，那么此时替换任务找不到文件对应的json文件，默认不会替换页面内容，那么页面中的文件名就不会被替换，所以需要我们将之前的任务作为依赖注入到revCollertor中，在revCollertor执行时保证其他任务先执行完毕
  //这里表明revCollertor任务需要在image和css任务完成之后再执行
})

这里还需要注意，如果我们要想将其他任务作为依赖，那么在其他任务执行时需要将它们返回，在gulp前添加一个return，如下：

gulp.task('useref', function () {
    return gulp.src('./index.html') 
               .pipe(useref())
               .pipe(gulpif('*.js', uglify())) 
               .pipe(gulp.dest('./release/view'));
});

src

路径

pipe

管道

dest

存储，参数为存储路径

watch

可以实时监听，例如我们可以使用该功能实时监听less变化，然后将less解析为css

gulp.task("watchLess",function(){
    gulp.src("./css/index.less") //监听css下的index.less文件的变化
        .pipe(less()) //调用gulp-less插件
        .pipe(gulp.dest("./css/index.css")); //存储为css文件，然后在页面中直接引入index.css即可
})

还能够实现浏览器实时展现css文件效果