gulp自动化构建工具

---

首先，肯定是需要下载安装node.js的。安装完成之后我们可以在操作命令行来查看版本号。

node -v
nmp -v

然后我们可以创建项目 ， 在这儿要提到一点 gulp安装 一个是全局的一个是依赖项目的。 对应的命令行是

npm gulp -g

依赖项目的需要先进入到项目路径 然后

npm gulp --save-dev

npm init    //我们对项目信息进行填充 包括项目名称 版本号 描述等等。

var gulp = require('gulp'),
    minifycss =require('gulp-minify-css'),  //CSS压缩
    concat =require('gulp-concat'),       // 文件合并
    uglify =require('gulp-uglify'),       //js压缩插件
    rename =require('gulp-rename'),       // 重命名
    order = require('gulp-order');  //顺序

这是经常用到的几个插件。 作用都在后面注释里。 他们可以执行代码的合并压缩重命名。提高项目运行效率。
这是基本的，当然需要我们创建一个gulpfile.js的文件 来执行。 下面我贴上里面的代码

var gulp = require('gulp'),
    minifycss =require('gulp-minify-css'),  //CSS压缩
    concat =require('gulp-concat'),       // 文件合并
    uglify =require('gulp-uglify'),       //js压缩插件
    rename =require('gulp-rename'),       // 重命名
    order = require('gulp-order');

//1.压缩css
gulp.task('minifycss', function() {
    returngulp.src('css*.js')
//    .pipe(order(
//       ['js/ui-route.js','js/config/config.js','js/colltor/list1.js']
//    ))
//     .pipe(concat('all.js'))           //合并所有js到all.js
//     .pipe(gulp.dest('dist/js'))        //输出all.js到文件夹
//     .pipe(rename({suffix: '.min'}))    //rename压缩后的文件名
//     .pipe(uglify())                  //压缩
//     .pipe(gulp.dest('dist/js'));        //输出
//});

//3.将以上两个任务合并为一个任务
gulp.task('build', ['minifycss', 'minifyjs']);

//4.监视文件的变化，自动执行任务
// 监视文件的变化，当文件有更新时执行build任务
gulp.task('watch', function () {
   gulp.watch(['src/js/*.js', 'src/css/*.css'], ['build']);
});

//5.定义默认任务
gulp.task('default', ['build', 'watch']);

代码后面都有注释 。 这就是从 代码的合并  =》 压缩 =》重命名 =》输出的过程。