Gulp.js

1)Gulp.js是Node的构建工具  ，需提前安装Node

2)npm  install -g gulp           全局安装 gulp

3) npm install --save-dev gulp gulp-util          安装依赖项      

4）npm install  --save-dev gulp-uglify  gulp-concat    安装插件     压缩合并js文件的

5）创建gulpfile.js文件，在其中定义你要运行的任务

**安装依赖和插件时都保存至本地-save-dev   同时这些安装包也会配置到package.json文件内

开始压缩合并js文件

01)js内部js代码

var gulp = require('gulp'),

        gutil = require('gulp-util'),

         uglify = require('gulp-uglify'),

          concat = require('gulp-concat')

02）需要gulp执行的任务

         gulp.task('name',callback)             整个过程类似jquery的链式调用

        gulp.task('js',function(){

                                           gulp.src('./js/*.js')                          src方法指定处理js文件的位置，获取匹配到的所有的js文件的路径，并将其传递给插件进行处理的‘流’

                                             .pipe(uglify( ))                                pipe方法通过src()方法获得并传递过来的‘流’，并将其传递给制定的插件（uglify)         

                                             .pipe(concat('all.js'))                      合并‘流’中的所有的js文件为一个名为'all.js'的文件

                                               .pipe(gulp.dest('./js'))                    将‘all.js’文件写入我们指定的目录   

                                                  })

03）gulp.task('default',['js'])

完整的 gulpfile.js:

// 定义依赖项和插件

vargulp=require('gulp'),

    gutil=require('gulp-util'),

    uglify=require('gulp-uglify'),

    concat=require('gulp-concat');

 

// 定义名为 "js" 的任务

gulp.task('js', function(){

    gulp.src('./js/*.js')

        .pipe(uglify())

        .pipe(concat('all.js'))

        .pipe(gulp.dest('./js'));

});

 

// 定义默认任务

gulp.task('default', ['js']);

回到命令行（项目根目录），输入gulp，回车。gulp找到gulpfile.js文件，加载依赖的插件，启动默认任务，然后执行我们的‘js’任务，可以 看到如下最终结果

Gulp还提供了一个watch( )方法，时时监控内部js文件，无需手动修改

gulp.watch('./js/*.js',['js'])

摘自小李刀刀的博客                                  https://ofcss.com/2014/05/03/introduce-front-end-task-runner-gulpjs-with-demo.html