一、Gulp

开发和部署前端项目：

在开发Web应用中为加速客户端资源响应（js和css），减少对js和css的请求，通过bundles来实现。

在ASP.NET5中放弃该特性，被其他类似的组件所代替。比如使用Gulp, npm和bower等。

一、安装Node

访问http://nodejs.org，然后点击大大的绿色的install按钮，下载完成后直接运行程序。npm会随着安装包一起安装

为了确保Node和Npm已经正确安装，查看安装版本命令：

node -v     npm -v

NPM是基于命令行的node包管理工具。

使用gulp自动化构建工具

为什么要使用gulp？

你在项目部署到服务器上之前是否还在一个个的压缩js和css文件？如果是，那你就out了；因为gulp可以实时监控你的每个文件，同时生成对应压缩、合并后的文件，为开发提速不少。当然gulp的功能还远不止如此！

其实就是通过gulp组件，或者说通过gulp这个配置管理文件，去管理你的资源文件，而不需要你手动去一个一个引用绑定以及压缩文件。

1、NPM下使用Gulp（npm是一个项目管理依赖包的工具，Gulp是对资源管理工具）

全局安装gulp。

npm install --global gulp 

-g 表示全局安装，这样你在电脑上任何位置都能只用gulp 命令。

（仅限了解）npm init 初始化创建npm项目并生成一个package.json一个保存项目依赖信息。

我们局部安装Gulp。使用—save-dev，将通知计算机在package.json中添加gulp依赖，并将依赖资源下载。

npm install gulp --save-dev

执行完成后，gulp将会默认创建一个json文件和一个node_modules文件夹。

2、在项目根目录下创建一个名为 gulpfile.js 的文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
    console.log("Gulp_Start");
});

3、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>）

gulp

二、Gulp操作()

1、合并JS

→ 在项目根目录下创建src文件夹
→ 在src下创建a.js, b.js, c.js

a.js:
console.log('a.js');

b.js:
console.log('b.js');

c.js:
console.log('c.js');

→ npm install gulp-concat
→ 在gulpfile.js中编写如下

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

gulp.task('js', function(){
   gulp.src('src/*.js')
       .pipe(concat('all.js')) //合并的文件名
       .pipe(gulp.dest('dist')); //合并后文件所在的目录
});

在项目根目录下多了dist文件夹，里面有一个all.js文件：
console.log('a.js');
console.log('b.js');
console.log('c.js');

合并JS（源头文件，以数组形式）

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

gulp.task('js', function(){
   gulp.src('src/*.js')
       .pipe(concat('all.js')) //合并的文件名
       .pipe(gulp.dest('dist')); //合并后文件所在的目录
});

gulp.task('other-js', function(){
   gulp.src(['src/a.js', 'src/b.js'])  //源头文件，以数组形式
       .pipe(concat('two.js'))
       .pipe(gulp.dest('dist'));
});

→ 在控制台输入：gulp other-js

在dist下多了two.js文件：

console.log('a.js');
console.log('b.js');

合并JS（多个任务执行）

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

gulp.task('js', function(){
   gulp.src('src/*.js')
       .pipe(concat('all.js')) //合并的文件名
       .pipe(gulp.dest('dist')); //合并后文件所在的目录
});

gulp.task('other-js', function(){
   gulp.src(['src/a.js', 'src/b.js'])  //源头文件，以数组形式
       .pipe(concat('two.js'))
       .pipe(gulp.dest('dist'));
});

gulp.task('default',['js', 'other-js'], function(){
   console.log('hello');
});

→ 删除dist下的所有文件
→ 在控制台输入：gulp default(也可以输入gulp,因为default是默认的任务名称)

dist文件夹下又多了all.js和two.js文件，说明js和other-js两个任务已经被运行。

2、监控文件变化,实现自动化

→ 修改gulpfile.js,增加一个任务，监控src中的文件变化，一旦有变化执行default任务

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

gulp.task('js', function(){
   gulp.src('src/*.js')
       .pipe(concat('all.js')) //合并的文件名
       .pipe(gulp.dest('dist')); //合并后文件所在的目录
});

gulp.task('other-js', function(){
   gulp.src(['src/a.js', 'src/b.js'])  //源头文件，以数组形式
       .pipe(concat('two.js'))
       .pipe(gulp.dest('dist'));
});

gulp.task('default',['js', 'other-js'], function(){
   console.log('hello');
});

gulp.task('watch', function(){
   gulp.watch('src/*',['default']);
});

→ 控制台运行：gulp watch

控制台提示正在watching

→ 打开a.js文件修改并保存

console.log('a.js');
console.log('updated');

在all.js中也有了相应的变化：

console.log('a.js');
console.log('updated');
console.log('b.js');

console.log('c.js');

4、优化css, javascript,以及图片

→ 先终止监控
ctrl+c
→ npm install gulp-uglify gulp-minify-css gulp-imagemin
→ 在src文件夹下加入图片和css文件
→ 修改gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');

//优化js文件
gulp.task('js',function(){
   gulp.src('src/*.js')
       .pipe(concat('all.js'))
       .pipe(uglify())
       .pipe(gulp.dest('dist'));
});

//优化css文件
gulp.task('css',function(){
    gulp.src('src/*.css')
        .pipe(minify())
        .pipe(gulp.dest('dist'));
});

//优化图片
gulp.task('images',function(){
    gulp.src('src/*.jpg')
        .pipe(imagemin())
        .pipe(gulp.dest('dist'));
});

gulp.task('default',['js','css','images'])

→ 控制台运行：gulp

进入到dist文件夹下的所有js, css, image文件都是经过压缩的。

5、同时输出压缩和未压缩js文件

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('js', function(){
    gulp.src('src/*.js')
        .pipe(concat('all.js'))//导出一个没有压缩的文件
        .pipe(gulp.dest('dist'))
        .pipe(uglify()) //压缩
        .pipe(concat('all.min.js'))//导出一个压缩文件
        .pipe(gulp.dest('dist'));
});

→ 控制台运行：gulp js

在dis下同时输出all.js和all.min.js文件。

6、使用gulp-htmlbuild替代html中的某个部分

→ npm install gulp-htmlbuild
→ 在src下创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

 <!-- htmlbuild:js -->
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script src="c.js"></script>
 <!-- endbuild -->
</body>
</html>

<!-- htmlbuild:js -->和<!-- endbuild -->之内的可以被替换掉。
→ 修改gulpfile.js文件

var gulp = require('gulp');
var htmlbuild = require('gulp-htmlbuild');

gulp.task('html', function(){
    gulp.src('src/index.html')
        .pipe(htmlbuild({
            js: htmlbuild.preprocess.js(function(block){
                block.write('hello.js');
                block.end();
            })
        }))
        .pipe(gulp.dest('dist'));
});

→ 控制台运行：gulp html
在dis下多了一个index.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

 <script src="hello.js"></script>
</body>
</html>

7、使用Jasmine检测代码

→ npm install gulp-jasmine
→ 在src文件夹下创建一个multiply.js文件

module.exports = function(left, right){
    return left * right;
};

→ 在项目根目录下创建一个spec文件夹
→ 在spec文件夹下创建multiplye.js用来测试src文件夹下的multiply.js文件中的方法

var multiply = require('../src/multiply');

describe('multiply', function(){
    it('multiplies two numbers together', function(){
        expect(multiply(2,3)).toEqual(6);
    });
});

→ 修改gulpfile.js文件

var gulp = require('gulp');
var jasmine = require('gulp-jasmine');

gulp.task('test', function(){
    gulp.src('spec/*.js')
        .pipe(jasmine());
});

→ 在控制台运行：gulp test

控制台显示：1 spec, 0 failures

8、预编译less和CoffeeScript文件

→ 在src下添加一个app.coffee文件

add = (a, b) -> a + b;

result = add 2,2
console.log result

→ 在src下添加一个style.less文件

@nice-color:#593AD;

#header{
  color: @nice-color;
}

→ npm install gulp-coffee gulp-less
→ 修改gulpfile.js文件

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var less = require('gulp-less');

gulp.task('coffee', function(){
   gulp.src('src/*.coffee')
       .pipe(coffee())
       .pipe(gulp.dest('dist'));
});

gulp.task('less', function(){
   gulp.src('src/*.less')
       .pipe(less())
       .pipe(gulp.dest('dist'));
});

gulp.task('default',['coffee','less']);

→ 控制台运行：gulp

在dist文件夹下多了app.js和style.css文件

8、搭建本地服务器

→ npm install gulp-connect
→ src目录下有一个index.html文件
→ 修改gulpfile.js文件

var gulp = require('gulp');
var connect = require('gulp-connect');

gulp.task('copy', function(){
   return gulp.src('src/index.html')
       .pipe(gulp.dest('dist/'))
       .pipe(connect.reload());
});

gulp.task('watch', function(){
   gulp.watch('src/index.html',['copy']);
});

gulp.task('connect', function(){
   connect.server({
      port: 8000,
      root: 'dist/',
      livereload: true
   });
});

gulp.task('default',['copy','watch','connect']);

以上，把src下的index.html文件拷贝到dist下，并对src下的index.html文件进行监控，并搭建了一个服务器。
→ 控制台运行：gulp
→浏览器输入http://localhost:8000/
可以看到页面内容。
→ 修改src下的index.html内容，并保存
http://localhost:8000/中的页面内容也有相应的变化。

9、文件流

→ 在项目根目录下创建doc.txt
→ 在项目根目录下创建uppercase.js，用来在根目录下创建另外一个txt文件吧doc.txt中的字母转换成大写

var fs = require('fs');
var input = fs.createReadStream('doc.txt');
var output = fs.createWriteStream('doc-uppercase.txt');

input.on('readable', function(){
    output.write(input.read().toString().toUpperCase());
});

input.on('end', function(){
   output.end();
});

→ 控制台运行：node uppercase.js

在根目录下多了一个doc-uppercase.txt文件，里面的内容大写。

10、捕获异常

→ 修改gulpfile.js文件

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');

function handleError(error){
    console.log(error);
    this.emit('end');
}

gulp.task('coffee', function(){
    return gulp.src('src/*.coffee')
        .pipe(coffee())
        .on('error', handleError)
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/'));
});

gulp.task('watch',['coffee'], function(){
   gulp.watch('src/*.coffee',['coffee']);
});

→ 控制台运行：gulp watch

→ 在src下的app.coffee文件中故意制造错误

在控制台出现错误提示

11、自写一个插件

→ npm install through2
→ 在根目录下创建gulp-capitalize.js文件

var through = require('through2');

module.exports = function gulpCapitalize(){
  return through.obj(function(file, enc, cb){
      if(file.isNull()){
          return cb(null, file);
      }

      if(file.isStream()){
          this.emit('error', new PluginError('gulp-capitalize','Streams are not supported'));
          return cb();
      }

      if(file.isBuffer()){
          file.contents = new Buffer(file.contents.toString(enc).toUpperCase());
      }

      cb(null, file);
  });
};

→ 修改gulpfile.js文件

var gulp = require('gulp');
var capitalize = require('./gulp-capitalize');

function handleError(error){
    console.log(error);
    this.emit('end');
}

gulp.task('default', function(){
   return gulp.src('*.txt')
       .pipe(capitalize())
       .on('error', handleError)
       .pipe(gulp.dest('dist'));
});

→ 控制台运行：gulp

在src下多了txt后缀的文件，并且内容都为大写。