Gulp-前端进阶A-2

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

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

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

8、concat

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

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

9、less/sass

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

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

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