一、什么是gulp?
(一)gulp是前端项目的自动化构建工具
二、gulp的作用
(一)常用的gulp插件
1、压缩JS
2、合并文件
3、重命名文件
4、编译sass
5、压缩css
6、压缩图片
三、gulp依赖的运行环境: node.js
四、安装node.js并测试是否安装成功
五、全局安装gulp:npm install -g gulp@3
注:以下操作都必须在项目的根目录下进行操作:
六、初始化package.json文件:npm init [-y]
七、创建gulpfile.js
(一)局部安装
1、安装所需插件:npm install --save-dev 插件名
2、如:
gulp
gulp-uglify
gulp-rename
gulp-concat
3、在gulpfile.js中配置
a、通过require导入所需插件
//导入所需插件
const gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
b、发布任务
//发布任务
gulp.task('test',function(){
console.log('测试任务');
})
gulp.task('js',function(){
gulp.src('./src/ES5JS/*.js')
.pipe(uglify())
//.pipe(rename({"suffix" : ".min"}))
.pipe(concat('main.min.js'))
.pipe(gulp.dest('./dist'));
})
//发布自动监听任务
gulp.task('default',function(){
gulp.watch(['./src/ES5JS/*.js'],['js']);
})
八、 gulpAPI
1. gulp.task('任务名',function(){ 任务内容 }) : 用于发布任务
2. gulp.src('处理文件的URL') : 用于指定需要处理的文件路径
3. gulp.dest('出口路径') : 用于指定处理后文件所放路径
4. gulp.watch(['监听路径'],['任务名']) : 用于监听任务
注:pipe() : 用于连接下一步操作