var gulp = require('gulp'),
babel = require('gulp-babel'), // 编译ES6插件
less = require('gulp-less'), // 编译less插件
cssmin = require('gulp-minify-css'), // 压缩css插件
autoprefixer = require('gulp-autoprefixer'), // css添加前缀
uglify = require('gulp-uglify'); // 压缩js插件
gulp.task('help', function(){
console.log('\n gulp参数说明 gulp help\n');
console.log(' 编译less为css gulp taskLESS\n');
console.log(' 编译ES6为ES5 gulp taskES6\n');
console.log(' 压缩CSS gulp cssMin\n');
console.log(' 压缩js gulp jsMin\n');
console.log(' 同时执行所有任务 gulp build')
});
// 编译less为css
gulp.task('taskLESS', function(){
gulp.src('./src/less/*.less')
.pipe(less())
.pipe(gulp.dest('./src/css'))
})
// 编译es6为es5
gulp.task('taskES6', function(){
gulp.src('./src/js/es6/*.js')
.pipe(babel({presets: ['es2015']}))
.pipe(gulp.dest('./src/js/es5'));
});
// 压缩CSS
gulp.task('cssMin',['taskLESS'], function(){
gulp.src('./src/css/*.css')
.pipe(autoprefixer({ // 自动添加各浏览器前缀
browsers: ['last 2 version', 'Android >= 4.0'],
cascade: true, // 是否美化属性值
remove: true // 去掉不必要的属性值
}))
.pipe(cssmin())
.pipe(gulp.dest('./build/css'))
});
// 压缩js
gulp.task('jsMin',['taskES6'], function(){
gulp.src('./src/js/es5/*.js')
.pipe(uglify())
.pipe(gulp.dest('./build/js'));
});
// 总任务
gulp.task('build',['cssMin', 'jsMin']);
此处仅列举了基本使用,后续补充更多的使用场景,同时也欢迎大家补充