使用gulp自动构建项目

简介

gulp是基于Nodejs的自动任务运行器， 她能自动化的完成javascript、coffee、sass、less、html、image、css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

browserSync能让浏览器实时快速的响应文件的更改（htm、js、css），并自动刷新页面，更重要的是browserSync可以同时在pc、平板、手机等设备下进行调试。任何一次代码保存，浏览器设备都会同时显示您的改动。

gulp

gulp是基于nodejs的，所以我们可以用npm安装，首先需要项目中有npm的package.json文件，如果没有，就先初始化：

npm install

在项目中安装gulp：

npm install gulp-less --save-dev

如果安装成功了，在package.json中会存在如下节点：

// 省去了多余的
{
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

在根目录下创建文件gulpfile.js：

var gulp = require('gulp');

gulp.task('default', function(){
    console.log('test');
});

我们创建了一个默认的gulp任务，在项目的终端输入命令：gulp，会运行这个gulp命令，并输出对应的test。

解析less并压缩合并

项目中使用less编写样式非常的流利，但是浏览器不懂less的语法，我们需要把less解释为css才可以在浏览器里使用。

我们这里用gulp-less来把less解释成css，用gulp-minify-css来压缩css，用gulp-concat将多个css合并为一个css文件，节省流量。

安装依赖：

npm install gulp-less --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-concat --save-dev 

然后创建任务编译Less：

var gulp = require('gulp');
var concat = require('gulp-concat');
var gulpless = require('gulp-less');
var minifycss = require('gulp-minify-css');
var path = {
    less: './less/*.less'
};
gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(gulpless())
        .pipe(minifycss())
        .pipe(concat('build.min.css'))
        .pipe(gulp.dest('./css'));
});

然后在终端运行命令：gulp less，稍等几秒就可以看到将less文件夹下面的less打包并合并到css文件夹下，名字为：build.min.css。

上面的命令可以解释为：创建任务less，将文件path.less代表的文件先运行任务gulpless()解析为css，然后继续将结果运行minifycss()任务进行压缩，然后将压缩后的css文件合并到build.min.css中，最后将这个文件输出到css文件夹下。

压缩合并js

项目中的js会越来越多，但是代码量不是很多，依次下载也会耗费多余的流量，所以把js进行压缩打包也是不错的选择。

打包需要用到的插件：

• gulp-ng-annotate：但是当打包angular项目的时候，压缩的js会破坏angular的依赖注入，而gulp-ng-annotate解决的就是angular中依赖注入的问题。
• gulp-uglify：压缩js
• gulp-sourcemaps：生成source map。简单说，source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

依次安装：

npm install gulp-uglify --save-dev
npm install gulp-ng-annotate --save-dev
npm install gulp-sourcemaps --save-dev

创建gulp的打包js的任务：

// 压缩js
var annotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

var path = {
    less: './less/*.less',
    js: './js/*.js',
};
gulp.task('js', function () {
    return gulp.src(path.js)
        .pipe(annotate({single_quotes: true}))
        .pipe(uglify())
        .pipe(concat('build.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./src/js'));
});

创建个启动任务：

gulp.task('serve',['less', 'js'], function(){
});

当在终端执行命令gulp serve之后，会运行less和js任务。

browserSync

每次修改后都需要去手动到浏览器里刷新才看到显示结果，对于调试来讲是很痛苦的。幸运的是，有browserSync这个插件可以让代码保存后自动刷新。

依赖

• browser-sync：让浏览器自动刷新
• opn：跨平台 ） 打开文件，网站，可执行文件等。

安装

npm install browser-sync --save-dev
npm install opn --save-dev

创建一个静态服务器：

browserSync.init({
   server:{
        baseDir: path.src
    },
    port:3000,
    open:false
}, function(){
    var homepage = 'http://localhost:3000/';
    opn(homepage);
});

这样就创建了一个静态资源服务器，端口为3000，并默认打开首页。

browserSync.stream() 方法返回一个变换流，将输出的文件注入到浏览器，比如前面的less任务，添加语句让任务成功之后，将打包好的文件注入到浏览器。

gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(less())
        .pipe(gulp.dest('./src/css'))
        .pipe(browserSync.stream());
});

可以和gulp任务结合，当任务结束后静态注入或者刷新浏览器。

// 编译完less后，无刷新方式更新页面
gulp.watch(path.less, ['less']);
gulp.watch(path.js, ['js']);
// 修改页面和js后，页面刷新，重新加载
gulp.watch([path.html, path.js]).on("change", function() {
    browserSync.reload();
});

汇总

全部的依赖package.js：

// 省略多余的
"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^3.0.0",
},

gulp任务gulpfile.js：

// 引入定义工具
var gulp = require('gulp');
var concat = require('gulp-concat');
// less 编译用到
var less = require('gulp-less');
// 压缩css
var minifyCss = require('gulp-minify-css');
// 压缩js
var annotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
// 动态刷新
var browserSync = require('browser-sync');
var opn = require('opn');
// 定义路径
var path = {
    less: './src/app/components/**/*.less',
    css: './src/css/**/*.css',
    js: './src/app/**/*.js',
    html: './src/app/components/**/*.html',
    src: './'
};
//合并html模板命令--gulp template
var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function () {
     gulp.src(path.html)
        .pipe(templateCache({module: 'templates'}))
        .pipe(gulp.dest('./src/js'));
});
gulp.task('less', function(){
    gulp.src(path.less)
        .pipe(less())
        .pipe(minifyCss())
        .pipe(concat('build.min.css'))
        .pipe(gulp.dest('./src/css'))
        .pipe(browserSync.stream());
});
gulp.task('js', function () {
    return gulp.src(path.js)
        .pipe(annotate({single_quotes: true}))
        .pipe(uglify())
        .pipe(concat('build.min.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./src/js'));
});
gulp.task('serve',['less', 'js'], function(){
    browserSync.init({
        server:{
            baseDir: path.src
        },
        port:3000,
        open:false
    }, function(){
        var homepage = 'http://localhost:3000/';
        opn(homepage);
    });

    // 编译完less后，无刷新方式更新页面
    gulp.watch(path.less, ['less']);

    gulp.watch(path.js, ['js']);
    // 修改页面和js后，页面刷新，重新加载
    gulp.watch([path.html, path.js]).on("change", function() {
        browserSync.reload();
    });
});

ok，现在就可以实时的保存，浏览器会实时的刷新，非常爽~