首页 > 代码库 > 详解常用的gulp命令

详解常用的gulp命令

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 插件名将插件下载下来

 

 

 

 

 

       

 

详解常用的gulp命令