Gulp:
1、开源的js自动化工具 |
2、用于前后端代码管理的一种工具 |
3、基于node和npm应用的构建工具 |
4、主要处理耗时及重复的任务 |
5、可以解决上百种的任务 |
1、压缩代码 |
2、合并代码 |
3、压缩图片 |
4、Sass转换 |
原理:
1、基于NodeJs中的数据流 |
2、主要使用pipe事件输入输出 |
3、插件独立使用 |
优势:
1、基于代码进行配置 |
2、可读性更高 |
3、基于数据流哦,所以可以操作pipe()事件 |
实例如下几种:
1、拷贝文件 |
2、压缩图片 |
3、压缩JS代码 |
4、Sass转换 |
5、执行多任务 |
6、代码合并 |
7、监听文件 |
// 处理任务
var gulp = require("gulp")
var imagemin = require("gulp-imagemin")
var uglify = require("gulp-uglify")
var sass = require("gulp-sass")
var concat = require("gulp-concat")
/**
* 常用方法
* gulp.task --- 定义任务
* gulp.src --- 找到需要执行任务的文件
* gulp.dest --- 执行任务的文件的去处
* gulp.watch --- 观察文件内是否发生变化
*/
// 定义任务
gulp.task("message", function() {
return console.log('gulp is running');
})
// // 执行任务 gulp + 任务名称(message)
// //定义默认任务
// gulp.task("default", function() {
// return console.log('这是默认的任务,只需要执行gulp即可');
// })
// 拷贝文件
gulp.task("copyHtml", function() {
gulp.src('./src/*.html')
.pipe(gulp.dest("dist"))
})
/**
* 图片压缩
* 安装插件 cnpm install --save-dev gulp-imagemin
*/
gulp.task("imageMin", function() {
gulp.src("./src/images/gulp1.jpg")
.pipe(imagemin())
.pipe(gulp.dest("dist/images"))
})
// 压缩js文件
// gulp.task("minify", function() {
// gulp.src("./src/js/*.js")
// .pipe(uglify())
// .pipe(gulp.dest("dist/js"))
// })
// sass 转换为css
gulp.task("sass", function() {
gulp.src('./src/sass/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest("dist/css"))
})
// 代码合并
gulp.task("script", function() {
gulp.src("src/js/*.js")
.pipe(concat("main.js"))
.pipe(uglify())
.pipe(gulp.dest("dist/js"))
})
// 监听文件是否发生变化
gulp.task("watch", function() {
gulp.watch("src/js/*.js", gulp.series("script"))
gulp.watch("src/images/*", gulp.series("imageMin"))
gulp.watch("src/sass/*.scss", gulp.series("sass"))
gulp.watch("src/*.html", gulp.series("copyHtml"))
})
// 如何执行多个任务
// 执行任务 gulp + 任务名称(message)
//定义默认任务
// gulp.task("default", ['message', 'copyHtml', 'imageMin', 'minify', 'sass']) // gulp 3
gulp.task('default',gulp.parallel('message', 'copyHtml', 'imageMin', 'sass', 'script', () => {
// Do something after a,b, and c are finished.
console.log('执行了。。。')
}))