一、关于Gulp

Q1:　　为什么需要Gulp或Grunt？

1.　　缓存问题，javascript和css都属于静态文件，因此当我们修改javascript文件时候，经常会遇到local没问题，但是部署到server时候，问题依旧存在，通常这就是缓存导致

2.　　Javascript和css等项目依赖关系

依赖的产生，会导致请求时间的延长，影响性能。其次，越来越多的js和cs文件，需要请求多次，而浏览器的请求每次请求是有限的，因此我们需要压缩js和cs文件，来减少请求次数，提高性能。

Q2:　　为什么选择Gulp?

Gulp的核心是基于流来进行文件的压缩，而Grunt是基于临时文件形式。Gulp减少了过多临时文件的产生，关于2者对比，如下表

其次，两者的过程也不一致

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更多的细节还请参考其他学习资料

二、创建我们的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‘
];