gulp 使用初解

gulp

gulp是基于Node.js的前端自动化构建工具，主要用于代码打包。目前主流的前端打包工具，grunt，gulp，webpack。grunt如今彷佛慢慢被gulp取代，而我使用gulp也是冲着你们说的配置简单去的，至于通道流，运行文件什么的其实仍是次要的；webpack如今很火，据说功能强大，没有用过。

npm install gulp -g

注意须要在npm全局中安装gulp，不然命令窗口中找不到gulp快捷命令，记得检查环境变量的配置状况。

gulp 插件

gulp的使用离不开gulp插件的使用，下面是经常使用的几款。

npm install del gulp gulp-concat gulp-minify-css gulp-usemin gulp-replace gulp-uglify gulp-rev gulp-rev-collector gulp-minify-html --save-dev

• del 和 gulp-clean

del是node.js的插件，二者的效果类似，都是用来清除文件。至于为何使用 del，而不是 gulp-clean，我是看到网上一篇文章推荐的。

• gulp-concat

gulp-concat用来作文件合并，能够将多个文件合并成一个文件，减小静态资源数量。

• gulp-minify-css

gulp-minify-css是css的压缩工具。

• gulp-uglify

gulp-uglify是js的压缩工具。官方文档上是这么写的 “Minify files with UglifyJS.”

• gulp-usemin

用来处理文件合并或者文件路径修改后，html中的引入问题，实际使用时须要经过在html中增长注释的方式来实现替换。

• gulp-replace

gulp-replace是一个文本修改插件，咱们通常用来作文件内容的的修改，经常使用的是路径修改。

• gulp-rev和gulp-rev-collector

gulp-rev和gulp-rev-collector，并无用到，这里只作标示。这两个插件能够用来处理文件名，同时生成一个json文件保存修改前的文件名和修改后的文件名，而且自动处理文件中的修改，例如图片文件至于css文件。

• gulp-minify-html

html文件压缩。

gulp的配置文件gulpfile.js

gulp依赖于配置文件gulpfile.js，在运行目录下须要手动建立gulpfile.js，gulp的任务执行代码会调用gulpfile.js。

gulp 语法

gulp的语法很简单，功能实现依赖于各类插件，因此学习上成本很低。gulp的语法其实就是是nodejs的语法。

• 声明依赖的插件

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace');
var usemin = require('gulp-usemin');
var minifyHtml = require('gulp-minify-html');

• 定义task

gulp.task('taskName', function() {

});

//default是默认task，当命令行缺省调用时会执行default任务。
gulp.task('default', [])

• 命令行调用task

gulp taskName // 直接调用具体的task

gulp    //调用默认的default，若是没用会报错

• 多个任务合并

gulp.task('default', ['task1', 'task2', 'task3', 'task4'])

• 文件拷贝语法

gulp.src('oldPath/images/*.*')
        .pipe(gulp.dest(newPath+'/images'));

• 文件合而且压缩语法

//css文件
    gulp.src(['app/assets/styles/style.css',
              'app/assets/styles/public.css',
              'app/assets/styles/page.css',
              'app/assets/styles/jquery-ui-1.10.3.css'])
        .pipe(concat('style.css'))
        .pipe(minifycss())
        .pipe(gulp.dest(newPath));
//js文件
    gulp.src([
            'app/components/*/*.js'
        ])
        .pipe(concat('components.js'))
        .pipe(uglify())
        .pipe(gulp.dest(newPath));

• 文本修改

gulp.task('demo-replace', function(){
    gulp.src(demoDir+'/index.html')  
      .pipe(replace('<link rel="stylesheet">', ''))  //删除
      .pipe(replace(/\.\.\/assets\//g, ''))                //正则替换
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest(newPath));

• 目录清理

gulp.task('clean', function(cb){
    del(rootPath, cb);
});

• 使用gulp-usemin

结合usemin可能很好的解决路径替换问题，增长配置的灵活性。

html文件中的配置

使用注解的方式能够很灵活的编写运行代码，你只须要将想要提供的文件引用加入到注解范围中来就行，<!-- build:<pipelineId>(alternate search path) <path> -->,pipelineId是自定义的，<path>是你要定义的文件名称和路径。

<!-- build:css style.css -->
  <link rel="stylesheet" href="../assets/styles/style.css">
  <link rel="stylesheet" href="../assets/styles/public.css">
  <link rel="stylesheet" href="../assets/styles/jquery-ui-1.10.3.css">
  <!-- endbuild -->

  <!-- build:js js/jquery-1.11.1.min.js -->
  <script src="../assets/js/jquery-1.11.1.min.js"></script>
  <!-- endbuild -->
  <!-- build:js js/jquery-ui-1.10.3.js -->
  <script src="../assets/js/jquery-ui-1.10.3.js"></script>
  <!-- endbuild -->
  <!-- build:js js/bootstrap.js -->
  <script src="../assets/js/bootstrap.js"></script>
  <!-- endbuild -->

js代码

usemin会自动合并多个文件，同时能够结合其余插件实现更多功能，注意多个pipelineId时，要使用function(){return}的方式，不然会报错，因此建议，就直接用function(){return}来写好了。使用usemin，我成功的将原来1500行代码缩减到了130行，去掉了大量的文本替换，也将replace任务给去除掉了。

gulp.src('app/demo/*.html')  
    .pipe(usemin({
        css: [function () {return minifycss();}],
        html: [function () {return minifyHtml({ empty: true });}],
        js: [function () {return uglify();}]
      }
    ))
    .pipe(replace(/\.\.\/assets\//g, ''))    
    .pipe(replace(/\.\.\/images/g, 'images'))
    .pipe(gulp.dest(demoDir));

gulp 实例

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
var replace = require('gulp-replace');

var root = 'dist';
var partnerDir = root + '/partners';



gulp.task('partners', function() {
  gulp.src('app/assets/images/*.*')
    .pipe(gulp.dest(partnerDir+'/images'));

  gulp.src('app/partners/*.html')  
    .pipe(usemin({
        css: [function () {return minifycss();}],
        // html: [ function () {return minifyHtml({ empty: true });} ],
        js: [ function () {return uglify();} ]
      }
    ))
    .pipe(replace(/\.\.\/assets\//g, ''))    
    .pipe(replace(/\.\.\/images/g, 'images')) 
  	.pipe(gulp.dest(partnerDir)); 

  gulp.src([partnerDir+'/*.js',partnerDir+'/*.css'])  
      .pipe(replace(/\.\.\/assets\//g, ''))    
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest(partnerDir)); 

  gulp.src('app/partners/modules/*/*.html')  
      .pipe(replace(/\.\.\/assets\//g, ''))    
      .pipe(replace(/\.\.\/images/g, 'images'))  
      .pipe(gulp.dest(partnerDir + '/modules')); 

});


gulp.task('clean', function(cb){
    del(root, cb);
});

gulp.task('replace',[ 'partners-replace'])

gulp.task('default', [ 'partners'])

gulp的缺点

• 问题很难定位，运行中间没有办法debug，console.log() 也不能很好的定位问题。

• task串行执行有问题。

貌似 runSequence 能够解决这个问题，我以前使用 gulp.start一个task的时候发现没有生效，貌似是须要在外面的task上加return什么的，具体还须要在研究。 应该是我代码的问题，