Gulp vs Grunt

Gulp vs Grunt

先来说说grunt，在使用grunt之前，首先要有一个Gruntfile.js文件，我目前项目中的大概是这么个样子：

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    cssmin: {
      minify: {
        expand: true,
        cwd: 'css/',
        src: ['*.css', '!*.min.css'],
        dest: 'css/',
        ext: '.min.css'
      },
      my_target: {
        files: [{
          expand: true,
          cwd: '../style/',
          src: ['*.css', '!*.min.css'],
          dest: '../build/style/'
        }]
      }
    },
    copy: {
      main: {
        files: [
          {
            expand: true,
            cwd: '../views/',
            src: ['**'],
            dest: '../build/views/'
          }, {
            expand: true,
            cwd: '../img/',
            src: ['**'],
            dest: '../build/img/'
          }, {
            expand: true,
            cwd: '../',
            src: ['main.html'],
            dest: '../build/'
          }, {
            expand: true,
            cwd: '../',
            src: ['*.txt'],
            dest: '../build/'
          }
        ]
      }
    },
    uglify: {
      buildall: {
        //当'minify'任务运行时Grunt将自动在"lib/"下搜索"**/*.js", 然后构建适当的src-dest文件映射，因此你不需要在文件添加或者移除时更新Gruntfile
        files: [{
          expand: true, //启用动态扩展
          cwd: '../config/', //批匹配相对lib目录的src来源
          src: '**/*.js', //实际的匹配模式
          dest: '../build/config/' //目标路径前缀
        }, {
          expand: true, //启用动态扩展
          cwd: '../js/controllers/', //批匹配相对lib目录的src来源
          src: '**/*.js', //实际的匹配模式
          dest: '../build/js/controllers/' //目标路径前缀
        }, {
          expand: true, //启用动态扩展
          cwd: '../js/directive/', //批匹配相对lib目录的src来源
          src: '**/*.js', //实际的匹配模式
          dest: '../build/js/directive/' //目标路径前缀
        }, {
          expand: true, //启用动态扩展
          cwd: '../js/filter/', //批匹配相对lib目录的src来源
          src: '**/*.js', //实际的匹配模式
          dest: '../build/js/filter/' //目标路径前缀
        }, {
          expand: true, //启用动态扩展
          cwd: '../js/service/', //批匹配相对lib目录的src来源
          src: '**/*.js', //实际的匹配模式
          dest: '../build/js/service/' //目标路径前缀
        }]
      },
      builda: {
        files: {
          '../build/js/app.js': ['../js/app.js'],
          '../build/js/libs/bridge.1.1.0.js': ['../js/libs/bridge.1.1.0.js']
        }
      },
      release: {
        files: {
          '../build/js/libs/libs.min.js': ['../js/libs/zepto.20140520.js', '../js/libs/angular.min.js', '../js/libs/*.js', '!../js/libs/bridge.1.1.0.js', '!../js/libs/libs.min.js']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-jshint'); //检查js语法错误
  grunt.loadNpmTasks('grunt-contrib-concat'); //合并文件
  grunt.loadNpmTasks('grunt-contrib-uglify'); //压缩代码
  grunt.loadNpmTasks('grunt-contrib-cssmin'); //css压缩
  
  grunt.registerTask('default', ['copy', 'cssmin', 'uglify']);

};

再来看gulp的，gulp需要一个gulpfile.js文件，我目前项目中的是这个样子：

var gulp = require('gulp'),//gulp基础库
    concat = require('gulp-concat'),//合并文件
    cssmin = require('gulp-minify-css'),//压缩css
    htmlmin = require("gulp-htmlmin"),//压缩html
    jsmin = require('gulp-uglify'),//压缩js
    rename = require('gulp-rename'),//重命名文件
    clean = require("gulp-clean"),//清理目录
    replace = require('gulp-replace'),//文本替换
    processhtml = require('gulp-processhtml'),//处理html文件
    addsrc = require('gulp-add-src'),//添加额外的文件流
    option = {
        buildPath: "../dist"//构建目录
    };
//构建目录清理
gulp.task("clean", function (done) {
    //return cache.clearAll(done);
    return gulp.src(option.buildPath, {
        read: false
    })
    .pipe(clean({force: true}));

})

gulp.task("imgcopy", function () {//图片拷贝
    gulp.src("../img/**/*")
    .pipe(gulp.dest(option.buildPath + '/img/'))
})

//js文件压缩
gulp.task('jsmin', function () {
    gulp.src(["../js/**/**/*.js",'!../js/libs/*.js'])
        .pipe(jsmin())
        .pipe(gulp.dest(option.buildPath+ "/js/"))
});

//需要合并和压缩的文件
gulp.task('concat', function () {
    gulp.src(['../js/libs/angular.min.js','../js/libs/*.js', '!../js/libs/bridge*.js'])
        .pipe(concat('libs.min.js'))
        .pipe(jsmin())
        .pipe(addsrc('../js/libs/bridge*.js'))
        .pipe(jsmin())
        .pipe(gulp.dest(option.buildPath + "/js/libs/"))
});

gulp.task("processhtml", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(processhtml())
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(option.buildPath + '/'))
})

//压缩css
gulp.task("cssmin", function () {
    gulp.src("../style/*.css")
        .pipe(cssmin())
        .pipe(gulp.dest(option.buildPath + '/style'))
})

//压缩html文件
gulp.task("htmlmin", function () {
    gulp.src('../views/**/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest(option.buildPath + '/views'))
})

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function () {
    gulp.start('jsmin', 'cssmin', 'processhtml', "htmlmin", 'imgcopy', 'concat');
});

Grunt处理任务的流程：

gulp处理任务：

写Gruntfile.js的时候，你要按照别人定好的规则来写配置文件，每个任务的配置文件规则（JSON格式）可能都不尽相同，而写gulpfile.js的时候，你只需要了解4个gulp的方法就可以了，即使你要写配置文件（比如项目的构建目录是哪里，css文件的目录又是哪个，你可以写个JSON来标明），那这个配置文件的格式也是掌握在你自己的手里，想怎么写就怎么写，根本不用关心具体的格式，只要声明完格式，待会自己用到的时候记得就好了。grunt是基于配置文件来做构建的，而gulp采用的是代码优于配置的策略，一个是写配置文件，一个是写代码，个人还是比较倾向于后者。

此外，使用grunt的I/O过程中会产生一些中间态的临时文件，A任务处理完会生成一个临时文件，B任务会读取这个临时文件，继续做自己的操作，然后再生成一个临时文件，给C任务用，以此类推，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。

而使用gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。构建速度也要比grunt快，但是如果构建的项目很小，可能差距就体现不出来了。

Gulp为什么快

• 使用orchestrator任务系统,最大限度的并发运行多个任务.

• 每个plugin只做一件事,做好一件事, 提升处理速度

• 流式处理,极少的文件IO

Gulp.js的核心设计

gulp官网上的简介是The streaming build system，
核心的词是streaming（流动式），Gulp.js的精髓在于对Node.js中Streams API的利用，
所以想要理解Gulp.js，我们必须理解Streams，streaming其实就是Streams的设计思想，
但是像我这种对Node.js只是一知半解的就只说到这里了，有兴趣的可以自行google。

gulp快速上手

1. 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp：

   $ npm install -g gulp

2. 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

   $ npm install gulp

   如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：

   $ npm install --save-dev gulp

3. 在项目根目录创建gulpfile.js文件

   var gulp = require('gulp');
   
   gulp.task('default', function() {
     console.log('hello world');
   });

4. 运行gulp

   $ gulp

   默认任务将被运行，向控制台输出hello world。
   如果需要运行单个任务, 使用 gulp taskname命令。

Gulp api速览

使用gulp，仅需知道4个API即可：gulp.task(),gulp.src(),gulp.dest(),gulp.watch()，所以很容易就能掌握。

gulp.src(globs[, options])

gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，本文暂不对文件流进行展开，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了，globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
options为可选参数。通常情况下我们不需要用到，暂不考虑。

文件匹配模式

Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

• * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾

• ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。

• ?匹配文件路径中的一个字符(不会匹配路径分隔符)

• [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法!(pattern|pattern|pattern)匹配任何与括号中给定的任一模式都不匹配的

• ?(pattern|pattern|pattern)匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?

• +(pattern|pattern|pattern)匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+

• *(pattern|pattern|pattern)匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*

• @(pattern|pattern|pattern)匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)

文件匹配列子：

• * 能匹配 reeoo.js,reeoo.css,reeoo,reeoo/,但不能匹配reeoo/reeoo.js

• *.*能匹配 reeoo.js,reeoo.css,reeoo.html

• */*/*.js能匹配 r/e/o.js,a/b/c.js,不能匹配a/b.js,a/b/c/d.js

• **能匹配reeoo,reeoo/reeoo.js,reeoo/reeoo/reeoo.js,reeoo/reeoo/reeoo,reeoo/reeoo/reeoo/reeoo.co,能用来匹配所有的目录和文件

• **/*.js能匹配reeoo.js,reeoo/reeoo.js,reeoo/reeoo/reeoo.js,reeoo/reeoo/reeoo/reeoo.js

• reeoo/**/co能匹配 reeoo/co,reeoo/ooo/co,reeoo/a/b/co,reeoo/d/g/h/j/k/co

• reeoo/**b/co能匹配 reeoo/b/co,reeoo/sb/co,但不能匹配reeoo/x/sb/co,因为只有单**单独出现才能匹配多级目录

• ?.js能匹配 reeoo.js,reeoo1.js,reeoo2.js

• reeoo??能匹配 reeoo.co,reeooco,但不能匹配reeooco/,因为它不会匹配路径分隔符

• [reo].js只能匹配 r.js,e.js,o.js,不会匹配re.js,reo.js等,整个中括号只代表一个字符

• [^reo].js能匹配 a.js,b.js,c.js等,不能匹配r.js,e.js,o.js

当有多种匹配模式时可以使用数组

    //使用数组的方式来匹配多种文件
    gulp.src(['js/*.js','css/*.css','*.html'])

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式

gulp.src([*.js,'!r*.js']) 匹配所有js文件，但排除掉以r开头的js文件
gulp.src(['!r*.js',*.js]) 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：

• r{e,o}c会展开为 rec,roc

• r{e,}o会展开为 reo,ro

• r{0..3}o会展开为 r0o,r1do,r2o,r3o

gulp.dest(path[,options])

gulp.dest()方法是用来写文件的，path为写入文件的路径,options为一个可选的参数对象，通常我们不需要用到，暂不考虑。
要想使用好gulp.dest()这个方法，就要理解给它传入的路径参数与最终生成的文件的关系。
gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，例如：

var gulp = require('gulp');
gulp.src('script/jquery.js')
    .pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js

要想改变文件名，可以使用插件gulp-rename

下面说说生成的文件路径与我们给gulp.dest()方法传入的路径参数之间的关系。
gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径。例如：

var gulp = reruire('gulp');
//有通配符开始出现的那部分路径为 **/*.js
gulp.src('script/**/*.js')
    .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js
//如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js

再举更多一点的例子

gulp.src('script/avalon/avalon.js') //没有通配符出现的情况
    .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js

//有通配符开始出现的那部分路径为 **/underscore.js

gulp.src('script/**/underscore.js')
    //假设匹配到的文件为script/util/underscore.js
    .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js

gulp.src('script/*') //有通配符出现的那部分路径为 *
    //假设匹配到的文件为script/zepto.js
    .pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js

通过指定gulp.src()方法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()生成的文件路径。
当我们没有在gulp.src()方法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，例如：

gulp.src('app/src/**/*.css') //此时base的值为 app/src

上面我们说的gulp.dest()所生成的文件路径的规则，其实也可以理解成，用我们给gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径。

gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src
     //设该模式匹配到了文件 app/src/css/normal.css
    .pipe(gulp.dest('dist')) //用dist替换掉base路径，最终得到 dist/css/normal.css

所以改变base路径后，gulp.dest()生成的文件路径也会改变

gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js

用gulp.dest()把文件流写入文件后，文件流仍然可以继续使用。

gulp.task(name[, deps], fn)

gulp.task方法用来定义任务，
name 为任务名，
deps 是当前定义的任务需要依赖的其他任务，
为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。
如果没有依赖，则可省略这个参数，
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

gulp.watch(glob[, opts], tasks)

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。
glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到，暂不考虑。
tasks 为文件变化后要执行的任务，为一个数组，

gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);

gulp.watch()还有另外一种使用方式：

gulp.watch(glob[, opts, cb])

glob和opts参数与第一种用法相同
cb参数为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type属性为变化的类型，可以是added,changed,deleted；path属性为发生变化的文件的路径

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 
    console.log(event.path); //变化的文件的路径
});     

常用的gulp插件介绍

js文件压缩

使用gulp-uglify
安装：npm install --save-dev gulp-uglify
用来压缩js文件，使用的是uglify引擎

var gulp = require('gulp'),
    uglify = require("gulp-uglify");

gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

重命名文件

使用gulp-rename
安装：npm install --save-dev gulp-rename
用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");

gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
});

压缩css文件

使用gulp-minify-css
安装：npm install --save-dev gulp-minify-css
要压缩css文件时可以使用该插件

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");

gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

html文件压缩

使用gulp-minify-html
安装：npm install --save-dev gulp-minify-html
用来压缩html文件

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");

gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

文件合并

使用gulp-concat
安装：npm install --save-dev gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了

var gulp = require('gulp'),
    concat = require("gulp-concat");

gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

自动刷新

可以结合browser-sync做多终端自动刷新，详见BrowserSync前端测试利器

处理html

使用gulp-processhtml
安装：npm install --save-dev gulp-processhtml
在构建时处理按你设想的修改html文件，比如说你构建之前你有N个脚本需要引入到html页面中，构建之后可能这N个文件被合并成了一个，这时候引入的地方也需要做相应的调整，那么差个插件就能派上用场了。
插件使用

gulp.task("processhtml", function () {
    gulp.src('../main.html')
        .pipe(processhtml())
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html构建之前的代码

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<!-- build:js js/libs/libs.min.js --> <!--process-html插件需要用到这个注释-- >
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular.touch.min.js"></script>
<script src="js/libs/zepto.20140520.js"></script>
<script src="js/libs/angular.ui.bootstrap.js"></script>
<script src="js/libs/angular-sanitize.min.js"></script>
<script src="js/libs/angular-ui-route.min.js"></script>
<script src="js/libs/fastclick.0.6.7.min.js"></script>
<script src="js/libs/carous.min.js"></script>
<!-- /build --> <!--process-html插件需要用到这个注释-->
</html>

main.html构建之后

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/libs/libs.min.js"></script> <!--注意这里的变化-->
</html>

字符串替换

使用gulp-replace
安装：npm install --save-dev gulp-replace
可以替换html或者txt等文件内的字符串为你想要的。
比如我每次构建的时候都需要去修改引用的文件的版本号，就可以使用这个插件

gulp.task("replace", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html文件

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=_VERSION_"/>
    <link rel="stylesheet" href="style/index.css?v=_VERSION_"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=_VERSION_"></script>
<script src="js/app.js?v=_VERSION_"></script>
<script src="js/service/TrackDataService.js?v=_VERSION_"></script>
<script src="js/service/APIService.js?v=_VERSION_"></script>
<script src="js/service/DService.js?v=_VERSION_"></script>
<script src="js/controllers/indexCtrl.js?v=_VERSION_"></script>
<script src="js/directive/lazy.js?v=_VERSION_"></script>
<script src="js/directive/slider.js?v=_VERSION_"></script>
<script src="js/filter/filters.js?v=_VERSION_"></script>
</html>

构建之后，_VERSION_被替换为时间戳。

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=1433405631860"/>
    <link rel="stylesheet" href="style/index.css?v=1433405631860"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=1433405631860"></script>
<script src="js/app.js?v=1433405631860"></script>
<script src="js/service/TrackDataService.js?v=1433405631860"></script>
<script src="js/service/APIService.js?v=1433405631860"></script>
<script src="js/service/DService.js?v=1433405631860"></script>
<script src="js/controllers/indexCtrl.js?v=1433405631860"></script>
<script src="js/directive/lazy.js?v=1433405631860"></script>
<script src="js/directive/slider.js?v=1433405631860"></script>
<script src="js/filter/filters.js?v=1433405631860"></script>
</html>

gulp还有很多插件，大家可以去gulp官网查看

总结

No Need To Grunt, Take A Gulp Of Fresh Air。
当然，grunt也并非一无是处，但是现在就是喜欢gulp，再也回不去了。
最后可以看看我做的gulp构建的demo：传送门