gulp基础

一、什么是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() : 用于连接下一步操作