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(){
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,如果要转载,请注明出处,
如果觉得写的不错, 请点个赞吧