gulp自动化打包（上）

文章概述

本文分为高低两篇，上篇重要引见一些经常运用的gulp插件（也是此次打包重要用的gulp插件），而下篇重要以一个demo项目为例，从当地checkout出适宜的git版本，紧缩、兼并、到最后打成zip包，发送至指定目次，做一个周全的演示。
流程预览：

项目构造

起首，有一个相似于如许的项目构造

图中重要演示项目中大概会有的几种文件范例，fonts(ttf,svg)，image(jpg,png),js,less(sass),现实项目会庞杂许多，最先一个项目的时刻，能够直接从git上拿一个angular-seed(webpack-seed)改。

最先运用gulp

下载gulp

最先玩gulp之前，要肯定本身有nodejs的环境，没有的话，先去弄个nodejs,这个比较简朴，直接在https://nodejs.org/en/，下载一个对应开辟环境的nodejs，然后一同next，途径默许就好，window下自定义了途径后，就不是全局的了，须要本身再配环境变量，图费事的话，就一同next到finish。

ok,装置好nodejs以后，在项目的src目次下（与index.html的同级目次）竖立一个package.json文件与gulpfile.js（这个名字要对，不然命令行辨认不了，项目中偶然竖立两个gulp的js文件，假如两个都含有统一使命，不迥殊申明的话，命令行只实行文件名为gulpfile.js的使命），在命令行输入
npm install gulp --save-dev（之前没有装置过gulp的话，实行npm install gulp -g --save-dev）指令，
“–save-dev”示意在装置gulp以后，将装置的信息保存在package.json文件，以便以后运用package.json文件去install相干插件（多人开辟迥殊要注重保存装置信息），建立gulp胜利后，目次构造变成

以后一切的gulp插件都以此体式格局装置，即npm install xx --save-dev

gulp插件细致引见

根据现实的打包递次， 我顺次会引见gulp-git、gulp-htmlmin、gulp-uglify、gulp-concat、gulp-ng-annotate（假如不是angular框架不须要）、gulp-less、gulp-minify-css、minimist、del、gulp-zip、gulp-ftp、run-sequence

gulp-git

gulp-git重要的作用是经由过程gulp剧本，来实行一些git的操纵,gulp-git插件基本上能够完成一切经常运用的git操纵，比方add、commit、push等等，还能够检察git-log，异常轻易，用法也异常简朴，比方下面是一段猎取git堆栈中tag为v1.0.0的代码(也能够checkout分支名)：

var git = require('gulp-git')；
gulp.task('checkout', function () {
  git.checkout('v1.0.0', function (err) {
    if (err) throw err;
  });
})

细致的gulp-git运用要领，请参照https://github.com/stevelacy/…。

gulp-htmlmin

就是一个紧缩html的插件，没什么迥殊要讲的，这边也直接拿网上的一个经常运用设置来演示。

var htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', function () {
    var options = {
        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
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

gulp-uglify

js紧缩插件，有四个可选属性，分别为
mangle：是不是殽杂变量名，默许为true(殽杂)，全局变量不会被殽杂，之前看到有的代码中的require被殽杂掉了，致使代码毛病，这个须要注重一下。
output：通报你一个对象去指定输出的选项，个人明白是定制化的去紧缩，通报一个参数对象，不然实行默许的参数。（不肯定）
compress：是不是完全紧缩，默许为true（全压）；
preserveComments：是不是保存备注，默许不保存；
本次紧缩悉数都采用默许参数：

gulp.task('compress', function (done) {
  return gulp.src(config.input.javascript)
    .pipe(ngAnnotate({single_quotes: true}))//等下引见
    .pipe(uglify())
    .pipe(concat('index_components.min.js'))//等下引见
    .pipe(gulp.dest(config.dist.basePath))
});

参数详细参照：https://github.com/terinjokes…。

gulp-concat

兼并代码，行将项目中种种JS兼并成一个JS文件。平常与紧缩连用，代码演示参考上方。

gulp-ng-annotate

假如不是angular框架，能够疏忽。。。。
假如是的话，而且你的代码是这类写法：

angular.module('someApp')
  .controller('someCtrl',function ($scope) {
})

即简写，玩angular的应当都懂，那末这个插件就比较重要了。
由于根据angular官方的说法，假如简写的话，紧缩的时刻，依靠注入很轻易出题目，所以这个插件就是协助我们处理简写紧缩的题目。在打包JS的时刻，每每紧缩、兼并是连着用的，即参考上方‘compress’的示例代码。

gulp-less

一个编译less文件的插件,在less编译中，可挑选增加插件，如【autoprefix】，自动增加CSS前缀的插件，代码实现为：

var less=require('gulp-less');
gulp.task('less', function () {
  gulp.src(config.input.less)
    .pipe(less({
    plugins: [autoprefix]
}))
    .pipe(minifyCss())//等下引见
    .pipe(concat('index.min.css'))
    .pipe(gulp.dest(config.dist.basePath));
});

less在开辟中相对于直接运用css，效力能够提拔不少，详细less运用，可参照<font color=#0099ff size=5 face=”STCAIYUN”>这篇文章</font>。
假如是sass开辟，就下载gulp-sass的相干插件。

gulp-minify-css

一个紧缩css的插件，与uglify相似，只不过一个紧缩JS，一个紧缩CSS。
可选参数为：
keepSpecialComments：是不是保存迥殊前缀。默许为“*”，保存悉数，1为保存第一条，0位移除悉数，为了防止浏览器不兼容款式，平常选默许。
keepBreaks：是不是保存换行，默许false（不保存）。
removeEmpty：是不是移除空元素，默许false（不移除）。
root、relativeTo：这两个属性都和@import相干，貌似是指出@import的途径（援用的less的途径），
比方:

指明lm-library的途径。
比较轻易的做法就是直接把lm-library一同都算进紧缩编译的途径当中，给import的less文件增加reference的属性，如许就不会对lm-library.less举行编译了，也不会影响一般的less。
详细属性参考：https://github.com/nfroidure/…。

minimist

这个插件，简朴来讲就是从命令行当中提取参数。
开辟中经常会碰到的运用场景是供应差别的参数，即动态参数，对应到gulp中，假如我们须要在命令行中手动输入某个参数，此时就能够用minimist把他从命令行“提取”出来。
从minimist官方的文档来看，exp为如许：

$ node example/parse.js -a beep -b boop
{ _: [], a: 'beep', b: 'boop' }

文档诠释也是一个‘-’为key,以后为value。但个人现实操纵为两个‘-’为key。能够原因是，我下的插件不是看的文档的这个库，或许英文太差看错了。。。。。详细用的时刻要本身注重了。
详细代码为：

var argv = require('minimist')(process.argv.slice(2));
gulp.task('checkout', function () {
 var gitTag = argv.tag;
  git.checkout(gitTag, function (err) {
    if (err) throw err;
  });
})

cmd中输入

gulp checkout --tag v1.0.0

此时，gitTag就会被赋值为v1.0.0。
参考文档为：https://github.com/substack/m…。

gulp-del

删除目的目次，目的文件，演示var del=require(‘gulp-del’)
gulp.task(‘clean’,function(){
return del(config.dist.basePath);
})易明白，就不细致引见了。

gulp-zip

将src中的种种文件，打成一个zip包，演示代码：

var zip = require('gulp-zip');
gulp.task('zip', ()  {
         gulp.src('src/*')
        .pipe(zip('zipName.zip'))
        .pipe(gulp.dest('dist'));
});

gulp-ftp

将目的文件，发送至FTP服务器，这边有5个参数是必填的，分别为：
host:服务器地点(必需)
port：服务器端口(必需)
user：ftp账户(必需) // 假如FTP没有接见限定，能够不填
pass：ftp账户暗码(必需)// 假如FTP没有接见限定，能够不填
remote: 对应的服务器文件地点(必需)
logger：输出文件列表称号,默许在项目根目次天生文件(可选,默许：logger.txt)
froot: 提单文件前缀(可选，默许：/usr/local/imgcache/htdocs)
exp：体验环境地点(可选，默许null)
pro：正式环境地点(可选，默许null)
参考地点：https://github.com/sindresorh…。
演示代码：
gulp.task(‘ftp’, function () {

  return gulp.src("dist_zip/*")
    .pipe(ftp({
      host: 'testHost',
      port: 21,
      //user: 'anonymous',
      //pass:null,
      remotePath: "path/"
    }));
});

run-sequence

一个串行体式格局跑gulp使命的插件，在现实场景中，不允许我们同时跑许多使命，由于使命之间每每是相互依靠的，此时run-sequence就是一个很好的挑选，他能够让多个使命根据写入递次实行，同时能够掌握哪些使命并行跑，哪些根据递次跑。
参考代码：

 var runSequence = require('run-sequence')；
gulp.task('publish', function (callback) {
  runSequence('clean',['html', 'js','less', 'copy'],'zip_new',callback);
});

比方上述代码，实行递次为1、’clean’。2、[‘html’, ‘js’,’less’, ‘copy’]。3、’zip_new’。
固然也能够在gulp中运用依靠注入的要领。
比方：

gulp.task('two', ['one'], function() {
    //使命two,会在使命one完毕以后实行
});

但个人照样更喜好，用run-sequence由于一旦依靠项变多以后，一般的注入，相互之间依靠事后，可读性就会变差，而sequence会让代码看起来更文雅，写起来也更简朴。

上篇小结

本文上篇重要讲了gulp的装置，以及经常运用的插件的引见，gulp插件超等多。。本文引见的这些，重如果下篇现实用到的，下篇会运用上述引见的一切插件，来举行一次较完全的打包，ok，上篇作为铺垫就到这里。

这里是下篇传送门。