# 介绍

gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的理器，能在开发过程中做很多重复的任务，并使用工具自动完成，可以大大提高我们的工作效率
glup 对工程化的作用：自动压缩 JS 文件。自动压缩 CSS 文件。自动合并文件。自动编译 sass。自动压缩图片。自动刷新浏览器等

# 安装

使用 gulp 命令需要安装对应的脚手架工具

根目录下创建一个 gulpfile.js 文件，在文件中定义具体流程（可以使用各种插件），导出的就是一个个任务。

gulp 常用的 API 有：

Task：这个 API 用来创建任务，在命令下可以输入 gulp test 来执行 test 任务。
Watch: 这个 API 用来监听任务。
Src: 这个 API 设置需要处理的文件的路径，可以是多个文件以数组的形式 [main.scss，vender.scss], 也可以是正则表达式 /**/*.scss。
Dest: 这个 API 设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本

gulp 的使用流程一般是：

	const gulp = require("gulp");
	gulp.src("script/jquery.js") // 获取流的 API, 也可以传正则表达式
	.pipe(gulp.dest("dist/foo.js")); // 写放文件的 API

需要先安装对应的使用到的插件

	const gulp = require('gulp');
	const sass = require('gulp-sass');
	const autoprefixer = require('gulp-autoprefixer');
	const rename = require('gulp-rename');
	const cleanCSS = require('gulp-clean-css');
	const jshint = require('gulp-jshint');
	const concat = require('gulp-concat');
	const uglify = require('gulp-uglify');
	const notify = require('gulp-notify');
	gulp.task('styles', function() {
	// 编译 sass
	return gulp.src('src/styles/main.scss')
	.pipe(sass({ style: 'expanded' }))
	// 添加前缀
	.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
	// 保存未压缩文件到我们指定的目录下面
	.pipe(gulp.dest('dist/assets/css'))
	// 给文件添加.min 后缀
	.pipe(rename({suffix: '.min'}))
	// 压缩样式文件
	.pipe(minifycss())
	// 输出压缩文件到指定目录
	.pipe(gulp.dest('dist/assets/css'))
	// 提醒任务完成
	.pipe(notify({ message: 'Styles task complete' }));
	});
	// 发布任务
	gulp.task("scripts",function(){
	//js 代码校验
	return gulp.src("javascripts/*.js")
	.pipe(jshint())
	.pipe(jshint.reporter("default"))
	//js 代码合并
	.pipe(concat("all.js"))
	// 给文件添加.min 后缀
	.pipe(rename({suffix:".min"}))
	// 压缩脚本文件
	.pipe(uglify())
	// 输出压缩文件到指定目录
	.pipe(gulp.dest("assets"))
	// 提醒任务完成
	.pipe(notify({message : "Scripts task complete"}));
	});
	// 默认任务，运行 styles 和 scripts 任务
	gulp.task('default', gulp.parallel('styles', 'scripts'));