详解常用的gulp命令

Posted 2020-09-14

gulp.js是一款自动化构建工具，我们经常使用它在开发过程自动执行常见的任务。gulp.js 是基于 Node.js 构建的,利用 Node.js,可以快速构建项目。

由于gulp使用基于node，所以首先要安装node环境。node.js有很多非常强大的作用，本文主要应用其环境以及把它当成一款包管理器来使用

使用gulp来构建项目，其步骤为：

1.在目录中创建dist文件夹（要发布的代码）

                    src文件夹（开发代码）

2.在根目录下写命令行 初始化：npm init ,此时根目录会出现package.json

3.局部安装gulp

npm install gulp --save-dev

4.创建gulpfile.js文件 与dist和src同级

  配置信息：

 首先引入：

           var gulp = require("gulp")

（1）若想把src中的图片压缩至dist中

       首先需要引入：

var imgin = require("gulp-imagemin")

其中gulp-imagemin为图片压缩的gulp插件，在require之前，首先需要在命令中 npm install下来

       其次创建gulp任务 

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

     return 
              gulp.src("src/img/images/**/*").
              pipe(imgin()).
              pipe(gulp.dest("dist/images"));                               
  })

其中copyimg为任务名，gulp.src（）中为要操作的图片，pipe()中是要执行的，imgin是上面定义的压缩图片插件的名，gulp.dest()为要将图片移动到的文件夹

（2）若想把src的所有js文件合并成一个js文件且放入dist下

首先，先引入

var uglify = require("gulp-uglify");
var concat = reqiire("gulp-concat");
var rename = require("gulp-rename");

其中 gulp-uglify 用来压缩js ,gulp-concat 用来合并js,gulp-rename用来重命名.同理在require之前需要 npm install ....

其次，创建gulp任务

gulp.task("copyjs",function(){
    return
       gulp.src("/src/js/**/*").
          pipe(concat("all.js")).
          pipe(uglify()).
          pipe(rename("all.min.js")).
          pipe(gulp.dest("dist/js"))
})

 这个任务意思就是把src/js/下的所有文件合并起来，叫all.js。再将all.js压缩，之后重命名为all.min.js,将此js放入dist/js/下

（3）若想将css文件压缩，新增一个hash值，放到dist文件下

var minifycss = require("gulp-minifycss");
var rev = require("gulp-rev")

其中gulp-minifycss 用来压缩css文件 ，gulp-rev用来给静态资源文件加上一个hash值，同理注意使用 npm install ...下载插件

gulp.task("copycss",function(){
        return
           gulp.src("src/css/**/*").
           pipe(minifycss()).
           pipe(rev()).
           pipe(gulp.dest("dist/css")).
           pipe(rev.manifest()).
           pipe(gulp.dest("dist/css"));

})

此任务将src/css里的所有文件压缩并生成hash后缀名。rev.manifest()是会生成一个json，里面存储的是文件原名和生成hash文件名的对应。最后将文件放到dist/css下

（4）若想html文件压缩并放入dist下

var htmlmin = require("gulp-htmlmin");

其中gulp-htmlmin用来压缩html文件

gulp.task("copyindex",function(){
    return 
       gulp.src("src/client/**/*").
        pipe(htmlmin({
          removeComments:true,
          collapseWhite:true,
          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("dist/client"))

})

 此task用来压缩html页面，有很多选项可选择，如上注释

（5）若css文件用了gulp-rev。则html文件在使用时需要动态更改引入的css文件名

var revCollector = require("gulp-rev-collector");

gulp-rev-collector根据rev生成的json文件用来替换html 中的<link href=""/>

gulp.task("rev-collector",function(){
    return 
            gulp.src(["dist/css/**/*.json","dist/client/*.html"]).
            pipe(revcollector({replaceReved:true})).
            pipe(gulp.dest("dist/client"));
})

其中设置replaceReved标识, 用来说明模板中已经被替换的文件是否还能再被替换,默认是false

(6)若想自动监听

gulp.task("watch",function(){
  gulp.watch("src/index.html",["copyindex"]);
  gulp.watch("src/images/**/*",["copyimg"])
})

此任务对src下的index.html的文件监听任务名为copyindex的任务，同时对src/images下的所有图片监听copyimg这个任务

（7）创建服务器

var connect =   require(‘gulp-connect‘);

用来创建个服务器

 gulp.task(‘connect‘,function(){  
        connect.server({  
            root:"dist",//根目录  
            port: 8080,//端口号  
            livereload:true  
        });  
    });  

此task设置了服务的根目录，端口号，以及是否即时刷新

本文主要分享这些，一般为gulp常用的命令，需特别注意文中所有reqire进来的资源 都需要用npm install 插件名将插件下载下来