前端工具--gulp的使用

全文照抄 猴子猿 http://www.cnblogs.com/giggle/p/5389188.html ， 感谢猴子兄让我理解了gulp,之前看视频看的一头雾水。

1.全局安装gulp:目的是在命令行里使用gulp的命令
{
npm install gulp -g
}

2.命令行中cd到项目目录，局部安装gulp（如果不在项目中再次安装会报错，据说这样是为了避免发生版本冲突）
{
npm install gulp
}

3.在项目目录下新建一个gulpfile.js文件（必须这个名字，这个文件算是一个配置文件），编写我们的需求，以便gulp能按着我们的意愿来执行。

4.gulp的每个模块可以完成不同的任务，所以我们经常要将所需模块require到gulpfile.js这个配置文件中(如果执行任务的时候报错找不到某个模块，只要npm install 这个模块到此目录就可以，不用-g)。比如我们要让gulp为我们压缩js文件：
{
//在gulpfile.js中

var gulp = require ('gulp');
var uglify = require('gulp-uglify');
//新建一个压缩任务(名叫comppress,名字随便起)，这个任务的作用是帮我们把写好的script文件夹下的所有.js文件压缩并保存到newScript文件夹下(gulp会自动创建newScript文件夹）。
gulp.task('compress',function(){
    gulp.src('script/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('newScript'))
})

}
然后在命令行，cd到项目目录下，执行：gulp compress
就可以看到目录下生成了newScript文件夹，里面的文件也被压缩了。
5.添加一个watch任务，利用gulp监听script文件夹里所有js文件的改动，一旦改动就执行compress任务
{
//gulpfile.js 添加如下任务

gulp.task('watch',function(){
    gulp.watch('script/*.js',['compress']);
})

}

6.添加default任务（default这个名字不能改)，使gulp的默认任务就是watch任务
{
//gulpfile.js
gulp.task('default',['watch']);
}
7.上面的watch任务，一旦script文件夹下游一个文件发生改变，整个文件夹的所有js文件都会被压缩，这影响性能。改写watch任务如下：
{
//gulpfile.js

var watchPath = reqire('gulp-watch-path');
gulp.task('watch',function(){
    // gulp.watch('script/*.js',['firstScript']);
    gulp.watch('script/*.js',function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
        .pipe(uglify())
        //paths.distDir为目录文件
        .pipe(gulp.dest(paths.distDir))
    })
})

}

8.给压缩后的文件添加min后缀名
{
//gulpfile.js

//引入重命名模块
var rename = reqiure('gulp-rename')

gulp.task('watch',function(){
    gulp.watch('script/*.js',function(event){
        var paths = watchPath(event, 'script', 'newScript');
        gulp.src(paths.srcPath)
        .pipe(uglify())
        //压缩后添加min后缀名。
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(paths.distDir))
    })
})

}