Gulp自动化构建工具
构建工具：对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、lint代码质量检测等，自动化工具可以减轻你的劳动，简化你的工作。当配置文件中定义好任务后，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
Web中的构建工具：其实就是简化开发，提高效率。
gulp：Gulp是自动化构建工具，使用它可以增强你的工作流程！
var gulp = require(‘gulp‘); gulp.task(‘default‘, function() { // 将你的默认的任务代码放在这 });
1. 使用gulp插件首先就的安装插件，插件安装：
2. gulp插件的使用方式
gulp是基于流的自动化构建工具，采用管道流方式对文件进行处理（非所有，大部分）。 其中文件分为：src源文件, dest目标文件。
任务执行代码，如下：
gulp.src("js/*.js") //目标源文件列表
.pipe(uglify()) //对象源文件执行压缩任务
.pipe(gulp.dest("dest")); //输出到dest目录
src与dest之间可以有多个pipe管道任务。
3. gulp src源路径
gulp.src(path); 方法，设置源文件路径非常重要，可以设置一个明确的路径，比如：./js/index.js。但是更多时候我们需要通过匹配模式来简化路径的设置。
gulp支持node-glob匹配模式 ：https://github.com/isaacs/node-glob
每个人都需要知道的是：foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件；而foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件。
安装：cnpm i gulp-uglify
引入：gulp模块var gulp = require(‘gulp‘);
引入压缩插件：var uglify = require(‘gulp-uglify‘);
定义任务：
gulp.task(‘uglifyJS‘, function () { return pipeline( gulp.src(‘js/*.js‘), //监听的目标原路径 uglify(), //执行JS压缩任务 gulp.dest(‘dist‘) //任务执行完成后,新文件放在哪个文件夹下 ); });
一般开发中，为了区分压缩和非压缩的文件，压缩文件后缀一般为.min。 此时就可以使用gulp-rename来修改名字。
安装：cnpm i gulp-rename
//导入rename重命名插件
//引入gulp模块
var gulp = require(‘gulp‘);
引入压缩插件：var uglify = require(‘gulp-uglify‘);
引入重命名插件：var rename=require(‘gulp-rename‘);
//定义任务 gulp.task("uglify",function () { //方式1：字符串(了解即可) //压缩JS任务 gulp.task(‘uglifyJS‘, function () { return pipeline( gulp.src(‘js/*.js‘), //监听的目标原路径 uglify(), //执行JS压缩任务 rename(‘new.min.js‘), //给文件重命名 gulp.dest(‘dist‘) //任务执行完成后,新文件放在哪个文件夹下 ); });
//方式2：回调函数 //压缩JS任务 gulp.task(‘uglifyJS‘, function () { return pipeline( gulp.src(‘js/*.js‘), //监听的目标原路径 uglify(), //执行JS压缩任务 rename(function(path){ //path本次重命名的文件信息 console.log(path) //basename: 文件名 //extname: 后缀名 //path { dirname: ‘.‘, basename: ‘a‘, extname: ‘.js‘ } // basename + extname //修改输出文件名 path.basename += ‘.min‘ }), //给文件重命名 gulp.dest(‘dist‘) //任务执行完成后,新文件放在哪个文件夹下 ); });
安装：npm install gulp-less
var gulp=require("gulp"); var less = require(‘gulp-less‘); var path = require(‘path‘); gulp.task(‘less‘, function () { return gulp.src(‘./less/*.less‘) .pipe(less({ paths: [ path.join(__dirname, ‘less‘, ‘includes‘) ] })) .pipe(gulp.dest(‘./dist/css‘)); });
安装：cnpm i gulp-clean-css --save-dev
引入gulp模块：var gulp = require(‘gulp‘);
引入重命名插件：var rename=require(‘gulp-rename‘);
引入css压缩插件：var cleanCSS=require("gulp-clean-css");
//定义任务 gulp.task("default",function () { gulp.src("src/index.css") .pipe(cleanCSS()) .pipe(gulp.dest("dist")) });
压缩图片可以减少，图片的体积，提高传输速度。
安装：cnpm i gulp-imagemin --save-dev
引入gulp模块：var gulp = require(‘gulp‘);
引入重命名插件：var rename=require(‘gulp-rename‘);
引入压缩插件：var imagemin=require("gulp-imagemin");
//定义任务 gulp.task("default",function () { gulp.src("src/img/b.png") .pipe(imagemin()) .pipe(gulp.dest("dist/img")) });
文件被修改的时候，我们就需要执行相关的任务，但是如果每次修改都要人为的来操作，未免过来繁琐，所以，gulp提供了一个watch方法，可以在文件被修改的时候通过回调执行任务。
引入gulp模块：var gulp = require(‘gulp‘);
引入压缩插件：var uglify = require(‘gulp-uglify‘);
//定义任务 gulp.task("uglifyJS",function () { gulp.src("src/*.js") .pipe(uglify()) .pipe(gulp.dest("dist/js")) }); gulp.task("default",function(){ //参数1： 监听那些文件或者文件夹发生变化 //参数2： 调用那个任务 gulp.watch("src/*.js",["uglifyJS"]); });
gulp.task(name[, deps], fn)
一个任务可以依赖其他任务，[deps]一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
//引入gulp模块 var gulp = require(‘gulp‘); //gulp.task(name[deps], fn) //name 执行的任务 //deps 依赖的任务，先执行完成依赖任务再去执行任务本身 //fn 异步任务的回调函数 //任务1 gulp.task("task1",function(){ console.log("任务1"); }); //任务2 //任务2依赖任务1，在任务1执行完成才执行 gulp.task("task2",["task1"],function(){ console.log("任务2"); });
课后练习：使用gulp配置编译Less，执行css压缩，通过观察者看到热刷新效果的实例
//引入gulp核心模块 var gulp = require(‘gulp‘); //引入less编译插件 var less=require("gulp-less"); //引入重命名插件 var rename=require("gulp-rename"); //导入clean-css压缩插件 var cleanCss = require("gulp-clean-css"); //引入热刷新插件 var livereload=require("gulp-livereload"); //less编译和重命名的任务 gulp.task(‘lessTask‘, function() { gulp.src("./css/less/*.less") .pipe(less()) .pipe(rename({suffix:".min"})) .pipe(gulp.dest("./dist/minCss")) }); //压缩css的任务：依赖less编译任务完成之后才执行 gulp.task("cleanCSSTask",["lessTask"],function(){ gulp.src("./dist/minCss/*.min.css") .pipe(cleanCss()) .pipe(gulp.dest("./dist/css")) .pipe(livereload()); //执行热刷新任务 }); //定义观察者和热刷新的监听 gulp.task("default",function() { //热刷新的监听 livereload.listen(); //观察者任务 gulp.watch("./css/less/*.less",["cleanCSSTask"]); });
原文：https://www.cnblogs.com/qcdxw/p/14868407.html