Gulp的应用

index.js代码如下：

var index = {};
index = {
    test:function(argument){
        console.log('test');
    }
}
index.test();

main.js代码如下：

var main = main || {};
main.test = function(argument){
    console.log('main test');
}
main.test();

index.html代码如下：

<script src="build/all.min.js"></script>

gulpfile.js代码如下：

var gulp = require('gulp');
var uglify = require('gulp-uglify');        // 合并组件
var concat = require('gulp-concat');        // 压缩组件
// var paths = {
//     script:['js/index.js','js/main.js']
// }

gulp.task('default', function() {
    // pipe管道，上一级的输出作为下一级的输入
    gulp.src('js/*.js')                     // js下面的所有js
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('build'));          // 指定目录
});

或者可以指定要压缩合并的js文件，代码如下：

var gulp = require('gulp');
var uglify = require('gulp-uglify');        // 合并组件
var concat = require('gulp-concat');        // 压缩组件
var paths = {
    script:['js/index.js','js/main.js']
}

gulp.task('default', function() {
    // pipe管道，上一级的输出作为下一级的输入
    // gulp.src('js/*.js')                     // js下面的所有js
    gulp.src(paths)
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('build'));          // 指定目录
});

在终端输入如下命令，安装上面引用的2个组件,安装到项目依赖
gulp-uglify安装

cnpm install gulp-uglify --save-dev

gulp-concat安装

cnpm install gulp-concat --save-dev

此时package.json文件代码如下：

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-uglify": "^3.0.0"
  }
}

文件目录如下：