1、js压缩

注意在根目录的package.json文件里在成功安装uglify后要有 "gulp-uglify": "^1.5.4" 才行

var gulp = require('gulp'),

　　gulpLoadPlugins = require('gulp-load-plugins'),   //插件使用取代多次require(......)

　　plugins = gulpLoadPlugins();

var uglify=require('gulp-uglify');

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

　　console.log('default');

});

gulp.task('utjs',['default'],function(){     //先执行任务default

　　return gulp.src('src/js/*.js')

　　.pipe(plugins.uglify())                      //这里plugins.****

　　.pipe(gulp.dest('build'));

});

build目录里无文件夹时，自动匹配src文件结构生成，有文件夹时，build根生成，要想指定时，自己设置 .pipe(gulp.dest('build')); --> build/js或其他

2、gulp.src(path,{})---{base:'......'}作用

　　gulp.src('src/js/*.js',{base:'src'})，在build内有目录时，加了base则不再生成在根目录，而是按照src的目录结构生成

3、异步问题

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

gulp.task('two',['one'],function(){

　　console.log(888+'two');

});

gulp.task('one',function(fn){

　　setTimeout(function(){

　　　　console.log(888+'one');

　　　　fn();

　　},2000);

});

　　3.1 先说default，为默认任务，执行default可以直接gulp，所有任务可以无fun

　　3.2 一般情况下，异步的时间到了才执行，所以还是two的先执行了，这里，无fn时，顺序为one->two->default，输出console.log(888+'two');->console.log(888+'one');

　　3.3 fn：任务函数提供的回调，用来通知任务已经完成，就是one任务完成，然后才执行two，最后default，输出：

　　　　

4、watch：gulp.watch(glob[,opts],tasks)

　　4.1 

　　gulp.watch('src/js/*.js',['three']);

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

　　　　console.log('three');

　　　　//此处可以放页面刷新或者js压缩

　　});

　　改变js文件时变化：

　　

　　4.2 

　　var watcher=gulp.watch('src/js/b.js',['four']);

　　watcher.on('change',function(e){

　　　　console.log('change');

　　　　console.log(e.type+'、'+e.path);

　　});

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

　　　　console.log('112');

　　});

　　//gulp four

　　

　　watch从上向下执行，监听change先执行，输出的是类型和路径

5、rename/放在压缩后，x.min.js

　　....pipe(plugins.uglify()).pipe(plugins.rename())....

　　更多： https://www.npmjs.com/package/gulp-rename

6、minify-css

gulp.task('mincss',function(){    return gulp.src('src/less/*.css',{base:'src'})    .pipe(plugins.minifyCss())    .pipe(gulp.dest('build'));});

有无return好像没区别，base还是要写上的，这边跟空时，没有按照src目录结构生成

7、minify-html

1 gulp.task('minhtml',function(){2     return gulp.src('src/html/**/*.html',{base:'src'})3     .pipe(plugins.minifyHtml())4     .pipe(gulp.dest('build'));5 });

 要先安装npm install --save-dev gulp-minify-html，之前的也一样

8、concat

1 gulp.task('concat',function(){2     gulp.src('src/js/**/*.js',{
   base:'src'})3     .pipe(plugins.uglify())4     .pipe(plugins.concat('ab.js'))5     .pipe(gulp.dest('build'));6 });

concat('x.js') ---> x为未存在的js时，合并并生成x.js，x为存在的js时候，合并到x.js里面在build里生成，合并顺序好像是按js文件名字母顺便合并的

9、less/sass

1 gulp.task('less',function(){2     gulp.src('src/less/*.less')3     .pipe(plugins.less())4     .pipe(gulp.dest('build/css'))5 });

类似的，装sass时有点插曲，先放着

 

 

 

LAST：宗旨------一个gulp命令，所有代码自动压缩、转化、合并......管理so easy