入门gulp，这篇文章就够了-白红宇

1.安装运行gulp

1.1 全局安装gulp

npm install -g gulp

1.2 生成一个package.json

npm init

记得要把入口文件（entry point)设置为gulpfile.js

1.3 安装gulp作为项目依赖

npm install --save-dev gulp@3.9.1

这里有个坑，这里要下在gulp3.9.1的版本，gulp4与gulp3的语法有所不同

1.4 在项目根目录下创建一个名为gulpfile.js的文件

var gulp = require('gulp');gulp.task('default',function(){   console.log('运行gulp');})复制代码

1.5 运行gulp

gulp

2.gulp实战

2.1必会知识点

gulp用task来创建任务gulp.task(任务名，[先执行的任务],执行任务的函数)

gulp默认会执行名为default的任务

gulp.task('default',['html','css','js']，function(){    console.log('default默认执行')})在执行default之前，他会先去执行数组中的任务即先执行html任务，css任务，js任务，在执行default任务复制代码

gulp用src来读取文件

gulp.src("src/css/*")gulp会去读取src/css目录下的所有文件

gulp用dest来写入文件

gulp.dest('dist/css/')gulp会将读取的文件写入到dist/css文件下，写入的文件名跟读取时的文件名一致

gulp用pipe来当做管道，所谓管道即从水管的一头可以流向另一头

gulp.src('src/css/*')	.pipe(gulp.dest('dist/css/'))// gulp.src读取文件,gulp.dest写入文件，// pipe则将读取的文件传送给gulp.dest写入复制代码

gulp.watch('src/css/*',['css'])

watch会去监听src/css目录下的所有文件，一旦文件发生更改，则取执行css任务

2.2运用gulp

首先创建如下目录

└─dist│   	  └─src│   ├─css│   ├─html│   ├─imgs│   └─js│└─gulpfile.js│└─package-lock.json│└─package.json│└─node_modules复制代码

src是我们的工作目录，而dist是我们的输出目录

现在我们要将src目录下的文件输出到dist目录下

// gulpfile.jsvar gulp = require("gulp");var folder = {    src:'src/',    dist:'dist/'}gulp.task('css',function(){    gulp.src(folder.src+"css/*")    	.pipe(gulp.dest(folder.dist+"css/"))})gulp.task('html',function(){    gulp.src(folder.src+"html/*")    	.pipe(gulp.dest(folder.dist+"html/"))})gulp.task('js',function(){    gulp.src(folder.src+"js/*")    	.pipe(gulp.dest(folder.dist+"js/"))})gulp.task('default',['html','css','js'])//当前目录下，命令行 gulp  启动gulp复制代码

这就是基本的gulp工作流程了

当然这只是简单地将src目录下的文件搬到dist文件下，现在我要介绍都多个gulp常用的插件

压缩html--->gulp-htmlclean

var htmlClean = require('gulp-htmlclean');gulp.task('html',function(){    gulp.src(folder.src+"html/*")    	.pipe(htmlClean) //先压缩再写入    	.pipe(gulp.dest(folder.dist+"html/"))})复制代码

压缩图片--->gulp-imagemin

var imageMin = require(gulp-imagemin);gulp.task('img',function(){    gulp.src(folder.src+"img/*")    	.pipe(imageMin())    	.pipe(gulp.dest(folder.dist+'img/'))})复制代码

压缩js--->gulp-uglify

var uglify = require('gulp-uglify');gulp.task('js',function(){    gulp.src(folder.src+'js/*')    	.pipe(uglify())    	.pipe(gulp.dest(folder.dist+'js/'))})复制代码

给css加前缀

gulp-postcss

autoprefixer

var postcss = require('gulp-postcss');var autoprefixer = require('autoprefixer');gulp.task('css',function(){   gulp.src(folder.src+"css/*")    	.pipe(postcss([autoprefixer()])) //重点，注意看怎么写    	.pipe(gulp.dest(folder.dist+"css/"))})复制代码

好了，看到这里大家应该都知道使用插件了，现在我将剩下的插件和其功能列在下方

gulp-strip-debug 去除js中的所有调试语句、debug语句

gulp-sass 将sass转化为css

gulp-clean-css 压缩css

重点！！重点！！还有个插件是gulp-connect，可以开启服务器，并实时刷新

var connect = require('gulp-connect');gulp.task('server',function(){    connect.server({        port:8888.//端口号        livereload:true,//开启实时刷新    })})//gulp.task('css',function(){   gulp.src(folder.src+"css/*")    	.pipe(connect.reload())//加了connect.reload()后才能在浏览器实时看到最新变化    	.pipe(postcss([autoprefixer()])) //重点，注意看怎么写    	.pipe(gulp.dest(folder.dist+"css/"))})复制代码

好了到这里，你可能会嫌烦，每次改动gulpfile.js，就要在命令行输入一次gulp执行。

想省点力气，那么看看watch这个方法

gulp.task('watch',function(){    p.watch(folder.src+"html/*",['html']);//src目录下的html一有更改，就会执行html任务    gulp.watch(folder.src+"css/*",['css']);    gulp.watch(folder.src+"js/*",['js']);    gulp.watch(folder.src+'imgs/*',['img'])})复制代码

2.3 优化gulp

在上一小节中，我们运用了很多压缩文件的插件，但是我们希望在生产环境下，压缩文件。

开发环境下，不压缩文件

在node环境中设置环境变量

export NODE_ENV = development//开发环境复制代码

gulpfile.js

var devMod = process.env.NODE_ENV =='development'gulp.task('css',function(){    var page = gulp.src(folder.src+'css/*')    if(！devMod){        page.pipe(cleancss())    }    page.pipe((gulp.dest(folder.dist+'css/')))})复制代码

3. 代码下载地址

所有代码示例地址：git@github.com:huzhiwu1/test-gulp.git

结语

因为本人水平有限，如果有错漏的地方，还请看官多多指正

本文作者胡志武，写于2019/5/25，如果要转载，请注明出处，

如果觉得写的不错，请点个赞吧