标签：
Q1: 为什么需要Gulp或Grunt？
1. 缓存问题，javascript和css都属于静态文件，因此当我们修改javascript文件时候，经常会遇到local没问题，但是部署到server时候，问题依旧存在，通常这就是缓存导致
2. Javascript和css等项目依赖关系
依赖的产生，会导致请求时间的延长，影响性能。其次，越来越多的js和cs文件，需要请求多次，而浏览器的请求每次请求是有限的，因此我们需要压缩js和cs文件，来减少请求次数，提高性能。
Q2: 为什么选择Gulp?
Gulp的核心是基于流来进行文件的压缩，而Grunt是基于临时文件形式。Gulp减少了过多临时文件的产生，关于2者对比，如下表
|
Grunt |
Gulp |
|
Config First |
Code First |
|
Base on file |
Base on stream |
|
3000+ plugin |
1000+plugin |
其次，两者的过程也不一致
Grunt： Source-->Subtask1-->Temp.-->Subtask2-->Target //subtask越多产生的temp也就越多，这些temp文件是存放于disk之上的
Gulp: Soource-->Subtask1-->Subtask2-->gulp.dest()-->Target
在语法写法上，gulp也更简便和清晰
//grunt的语法 grunt.initConfig({ less: { development: { files: { "build/tmp/app.css": "assets/app.less" } } }, autoprefixer: { options: { browsers: [‘last 2 version‘, ‘ie 8‘, ‘ie 9‘] }, multiple_files: { expand: true, flatten: true, src: ‘build/tmp/app.css‘, dest: ‘build/‘ } } }); grunt.loadNpmTasks(‘grunt-contrib-less‘); grunt.loadNpmTasks(‘grunt-autoprefixer‘); grunt.registerTask(‘css‘, [‘less‘, ‘autoprefixer‘]);
//gulp的语法 var gulp = require(‘gulp‘), less = require(‘gulp-less‘), autoprefix = require(‘gulp-autoprefixer‘); gulp.task(‘css‘, function() { gulp.src(‘assets/app.less‘) .pipe(less()) .pipe(autoprefix(‘last 2 version‘, ‘ie 8‘, ‘ie 9‘)) .pipe(gulp.dest(‘build‘)); });
本文主要关于运用gulp的目的和如何运用，gulp更多的细节还请参考其他学习资料
1. 安装
npm install -g gulp
2. 创建我们的gulpfile.js文件
在使用gulp的时候，我们需要创建gulpfile.js，这是npm执行gulp所定向的文件名。
a. 首先定义我们的所要压缩的文件来源和去处
var paths = { src : { jsx: ‘Scripts/App/Components/*.jsx‘, componentsRoot: ‘./Scripts/App/components/‘, app: ‘./Scripts/App/app.js‘, flux: ‘./Scripts/App/flux.js‘, scripts: ‘Scripts/**/*.js‘ }, dest: { root: ‘root‘, bundles: ‘root/Scripts/dist‘, css: ‘root/Content/Style/app‘, bootstrap: ‘root/Content/Style/libs/bootstrap‘, serverBundle: ‘serverBundle.js‘, clientBundle: ‘clientBundle.js‘, jsx: ‘Scripts/App/Components‘ } };
b. 其他可能需要引用的模块
var externalLibs = [ ‘alt‘, ‘jQuery‘, ‘bootstrap‘ ];
一步步创建基于React+EF6+WebApi2+Gulp的项目（前端篇）
标签：
原文地址：http://www.cnblogs.com/ruanyifeng/p/5102298.html
