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