`

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采用的是代码优于配置的策略,一个是写配置文件,一个是写代码,个人还是比较倾向于后者。

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

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

Gulp为什么快

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

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

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

Gulp.js的核心设计

gulp官网上的简介是The streaming build system
核心的词是streaming(流动式),Gulp.js的精髓在于对Node.jsStreams API的利用,
所以想要理解Gulp.js,我们必须理解Streamsstreaming其实就是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])

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

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
用来把多个文件合并为一个文件,我们可以用它来合并jscss文件等,这样就能减少页面的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传送门

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics