gulp前端自动化工具的快速入门案例

最近项目和工作中要开始使用自动化工具了，回想一下以前接触这个的时候就是什么nodejs，grunt之类的了，这次干脆就用一个新的，那么就是gulp。。。

全局下利用npm安装gulp

sudo npm install -g gulp

项目中安装gulp包

npm install gulp --save-dev

这里创建一个示例项目demo，里面有index1.js，index2.js，index3.js三个文件

初始化项目

npm init .

gulp

在执行gulp命令的之前记得在根目录下新建gulpfile.js文件，没有的话会报错，创建之后继续执行就ok。。。

编辑gulpfile.js文件

var gulp = require('gulp');

//压缩js代码
var uglify = require('gulp-uglify');

//合并js文件
var concat = require('gulp-concat');

var paths = {
    scripts: ['index1.js', 'index2.js', 'index3.js']
}

gulp.task('default', function() {
    gulp.src(paths.scripts)
        .pipe(uglify())
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('build'));
});

这里别忘记安装一下uglify和concat这两个插件，如下：

sudo npm install gulp-uglify --save-dev

sudo npm install gulp-concat --save-dev

最后就是执行一下gulp命令了

[21:41:38] Using gulpfile ~/Desktop/jikexueyuan/gulpfile.js
[21:41:38] Starting 'default'...
[21:41:38] Finished 'default' after 7.65 ms

看到这样的输出就好，在build文件夹下可以看到压缩合并之后的js文件了。。。

经过这面这几小步，gulp已经被你拿下了，如果还要深入去搞的话，狂戳 这里