介绍
Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。
主要API
- gulp.src()
创建一个流,用于从文件系统 读取 Vinyl 对象。
- gulp.dest()
创建一个用于将 Vinyl 对象 写入 到文件系统的流。
- gulp.task()
在任务系统中 定义 任务。
- gulp.watch()
监听 globs 并在发生更改时运行任务。
安装使用
1.初始化项目
npm init -y
2.安装gulp
npm i -D gulp
建议在全局中也装上:
npm i -g gulp
3.创建gulpfile.js文件
创建gulpfile.js文件后,并在文件内写入测试内容:
function defaultTask(cb) {
console.log('Hello Gulp!')
cb();
}
exports.default = defaultTask
4.执行任务
在控制台中输入命令执行对应任务:
gulp default
5.测试结果
插件介绍
项目插件使用情况:
"devDependencies": { "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-preset-es2015": "^6.24.1", "gulp": "^4.0.2", "gulp-babel": "6", "gulp-clean-css": "^4.3.0", "gulp-concat": "^2.6.1", "gulp-less": "^4.0.1", "gulp-load-plugins": "^2.0.4", "gulp-rename": "^2.0.0", "gulp-uglify": "^3.0.2", "gulp-util": "^3.0.8" }
- gulp-load-plugins
gulp插件加载神器:
用了该插件后,无需手动require插件,它会自动检测到devDependencies内属于gulp的插件并挂载到自身中。
var gulp = require('gulp')
// 无需手动引入插件
// var cleanCss = require('gulp')
var plugins = require('gulp-load-plugins')()
// 使用插件:plugins.cleanCss (短横线 转换为 驼峰)
- gulp-clean-css
该插件用于压缩css文件
gulp.src('src/css/*.css') // 此处指定输如的文件
.pipe(plugins.cleanCss())
.pipe(gulp.dest('dist')) // 此处指定输出的文件夹
项目实际应用
功能:
- 将es6编译为es5
- 压缩并合并js文件
- 编译less文件
- 压缩并合并css文件
- 监听文件修改自动执行构建任务
- 任务执行时报错标识
var gulp = require('gulp')
var plugins = require('gulp-load-plugins')()
var jsPath = [
'src/js/*.js'
]
var cssPath = [
'src/css/*.css'
]
var lessPath = [
'src/css/*.less'
]
// js任务
gulp.task('jscompress',done=>{
console.log('Gulp js...')
gulp.src(jsPath)
.pipe(plugins.babel({
presets:['es2015']
}))
.pipe(plugins.uglify())
.on('error',function(err){
plugins.util.log(plugins.util.colors.red('[Error]'),err.toString())
})
.pipe(plugins.concat('mathEdit.min.js'))
.pipe(gulp.dest('dist'))
done()
})
// less任务
gulp.task('lesstask',done=>{
console.log('Gulp less...')
gulp.src(lessPath)
.pipe(plugins.less())
.pipe(gulp.dest('src/css'))
.on('end',function(){
done()
})
})
// css任务
gulp.task('csstask',done=>{
console.log('Gulp css...')
gulp.src(cssPath)
.pipe(plugins.cleanCss())
.on('error',function(err){
plugins.util.log(plugins.util.colors.red('[Error]'),err.toString())
})
.pipe(plugins.concat('mathEdit.min.css'))
.pipe(gulp.dest('dist'))
done()
})
gulp.task('csscompress',gulp.series('lesstask','csstask'))
// 监听文件并自动构建
gulp.task('auto', function () {
gulp.watch(jsPath, gulp.series('jscompress'));
gulp.watch(lessPath, gulp.series('csscompress'));
});
exports.lib = gulp.series('jscompress','csscompress')
技巧
- 等待less编译出文件后,再进行css文件压缩合并
解决:监听end事件,在end事件进行回调:
// less任务
gulp.task('lesstask',done=>{
console.log('Gulp less...')
gulp.src(lessPath)
.pipe(plugins.less())
.pipe(gulp.dest('src/css'))
// 监听end事件
.on('end',function(){
done()
})
})