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\']);

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