gulp的基本应用，核心的。简单的自己看别的@慕课网原创_慕课网

好久没有更新手记了，之前学了grunt，觉得不是很好用，听别人都说gulp很方便，所以最近就看一遍他的基本应用。

先看下示例代码

var gulp = require('gulp');

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

})

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

我一般写gulp的格式就是这样的，首先先把gulp用require加载进来，default是默认执行的任务。后面的 [ ] 是你上面已经定义的任务。

var gulp = require('gulp'),
    concat = require('gulp-concat');

gulp.task('testConcat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))//合并后的文件名
        .pipe(gulp.dest('dist/js'));
});

首先还是需要把插件gulp-contact用require引进来赋值给contact()。然后就可以用contact()。

gulp.src()是你所需要改变文件的路径。这里是改变所有的js，把js整合在一起。

.pipe()是写你通过什么方法来处理src（）中的文件。可以多个方法。

var rename=require('gulp-rename');      //重命名
var autoprefixer=require('gulp-autoprefixer');  //自动处理浏览器前缀
var concat=require('gulp-concat');      //文件合并
var minifyCss=require('gulp-minify-css');   //css压缩

//css自动添加前缀，整合，压缩
gulp.task('concat-css',function(){

    gulp.src('app/src/css/*.css')
    .pipe(concat('all.css'))        //合并css并命名为all.css
    .pipe(gulp.dest('app/dist/css'))    //目标路径
    .pipe(autoprefixer({        //自动添加前缀
        browers:['5%','Android >=2.3']
    }))
    .pipe(rename('allAuto.css'))
    .pipe(gulp.dest('app/dist/css'))
    .pipe(minifyCss())          //压缩
    .pipe(rename('all.min.css'))    //重命名
    .pipe(gulp.dest('app/dist/css'));
});

上面的例子对css的文件进行了多处处理。其实pipe（）就是执行的方法。注意不要把两个步骤分开在两个task之中，这样第二个task无法读取到刚刚生成的文件的。

里面还有一个pipe（gulp.dest()）;这个是你经过处理后文件存放的位置。你也可以两次处理之后再进行文件的存储。

        .pipe(autoprefixer({        //自动添加前缀
        browers:['5%','Android >=2.3']
    }))
    .pipe(rename('allAuto.css'))
    .pipe(gulp.dest('app/dist/css'))

这个地方就是经过自动添加前缀，重命名之后再进行文件存放。

最后一个就是watch，同样也是写在一个task里面。先看看例子吧。

//监听文件变化
gulp.task('watch',function(){
    gulp.watch('app/src/js/*.js',['concat-js','jsHint']);
    gulp.watch('app/src/css/*.css',['concat-css','min-css']);
    gulp.watch('app/*',['reload']);
});

这里的watch格式大概是这样的gulp.watch(' ',[ ]);
第一个参数是文件的路径，监听文件变化，第二个是执行的方法，就是你上面已经定义过的task任务。

gulp.task('default',['concat-css','watch']);

然后用在命令行输入gulp执行就可以了。

注意，这里不是叫你如何使用gulp，只是一个个人总结，方便理解而已，你首先需要知道gulp的大体结构

gulp的基本应用，核心的。简单的自己看别的原创