gulp的一些总结（与君共勉）

Posted 2020-10-08

gulp平时都能用到，下面举几个例子帮初学者来了解gulp使用：

var gulp = require("gulp");
var uglify = require(‘gulp-uglify‘);//获取 uglify 模块（用于压缩 JS）
var concat = require(‘gulp-concat‘);//合并
var rename = require(‘gulp-rename‘);//改名
var minifyCSS = require(‘gulp-minify-css‘);//获取 minify-css 模块（用于压缩 CSS）
var sass = require(‘gulp-sass‘);//编译scss
var babel = require("gulp-babel");//es6转es5
var es2015 = require("babel-preset-es2015");//es6转es5
// 需要额外安装 babel-plugin-check-es2015-constants
var minifyhtml = require("gulp-minify-html"); //压缩html
var htmlreplace = require(‘gulp-html-replace‘); //html中替换
// es6 编译 es5
gulp.task("es6", function(){
gulp.src("src/es6/*.js")
.pipe(babel({presets:[es2015]}))
.pipe(gulp.dest(‘dist/es6‘));
});
// 编译scss
gulp.task("sass", function(){
gulp.src(‘src/sass/*.scss‘)
.pipe(concat("bk.css"))
.pipe(sass())
.pipe(minifyCSS())
.pipe(rename({suffix:‘.min‘}))
.pipe(gulp.dest(‘dist/scss‘));
});
// 压缩 js文件
gulp.task("js", function(){
console.log("开始处理js文件（合并、压缩、改名、拷贝）");
gulp.src("src/js/*.js")
.pipe(concat("bk.js"))
.pipe(uglify())
.pipe(rename({suffix:‘.min‘}))
.pipe(gulp.dest(‘dist/js‘));
});
// 压缩css文件
gulp.task("css", function(){
console.log("开始处理css文件（合并、压缩、改名、拷贝）");
gulp.src("src/css/*.css")
.pipe(concat("bk.css"))
.pipe(minifyCSS())
.pipe(rename({suffix:‘.min‘}))
.pipe(gulp.dest(‘dist/css‘));
});
// 处理HTML文件
gulp.task(‘html‘, function() {
console.log("开始处理html文件（合并、压缩、改名、拷贝）");
gulp.src(‘src/**/index.html‘) //这里的**表示所有目录，所以下面dest位置会自动匹配该目录
.pipe(htmlreplace({
‘css‘: ‘css/all.min.css‘, //html中设置<!-- build:css -->这里是被替换的内容<!-- endbuild -->
‘js‘: ‘js/all.min.js‘
}))
.pipe(minifyHTML({quotes:true})) //是否保留引号
.pipe(gulp.dest(‘dist/‘));
});
// 监听：如果文件被修改，则执行相应任务
gulp.task(‘auto‘, function () {
gulp.watch(‘src/es6/*.js‘, [‘es6‘]);
gulp.watch(‘src/js/*.js‘, [‘js‘]);
gulp.watch(‘src/css/*.css‘, [‘css‘]);
gulp.watch(‘src/sass/*.scss‘, [‘sass‘])
});
gulp.task(‘default‘, ["auto"], function(){
console.log("默认任务");
});