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.js
var 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(){
    gulp.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，如果要转载，请注明出处，

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