阅读 97

一个小demo,了解glup大致结构

先看下示例代码

var gulp = require('gulp'); 
gulp.task('mytask',function(){

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

复制代码

首先先把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()是写你通过什么方法来处理src()中的文件。可以多个方法。

const rename=require('gulp-rename'); //重命名 
const autoprefixer=require('gulp-autoprefixer'); //自动处理浏览器前缀 
const concat=require('gulp-concat'); //文件合并 
const 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无法读取到刚刚生成的文件的。

最后是watch

//监听文件变化 
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']);
复制代码