前言：
这两天动手配置了一下gulp，发现gulp配置简单，构建速度快，在某些使用场景下还是个不错的选择，本文从零开始构建，到最后打包发布到生成环境。通过本文可以快速上手gulp，文末附送github源码，需要的可以点击下载。
gulp介绍：
gulp是一个基于流的前端自动化构建工具，与grunt、webpack为前端三大自动构建工具。
1.安装
//1.安装gulp脚手架
npm?install?--global?gulp-cli
//2.创建文件夹gulp-demo
mkdir?gulp-demo
//3.进入文件夹
cd?gulp-demo
//4.初始化项目
npm?init
2.gulpfile.js介绍
在项目根目录创建个gulpfile.js文件,执行gulp命令后，gulp会去读取gulpfile.js文件，这是gulp的入口文件，所有的指令逻辑处理都在此文件中进行。
当项目体量过大时，可以在根目录内创建个gulpfile.js文件夹，文件夹内部创建index.js，可以在index.js中引入不同的处理模块.
在以前的版本中都是通过gulp.task来创建不同的任务，新版本主要通过exports.xxx来导出任务
例：
function?test(cb)?{
?cb()
}
exports.test?=?test;
在控制台输入指令gulp test
[16:41:29]?Using?gulpfile?F:\gulp\gulpfile.js
[16:41:29]?Starting?'test'...
[16:41:29]?Finished?'test'?after?1.95?ms
如果将exports.test = test改为exports.default=test,在控制台直接输入gulp就可以直接构建了。
1.处理js
压缩js、创建sourcemap、重命名js
const?{
??src,?//gulp的内置方法
??dest
}?=?require('gulp');
//重命名js文件
const?rename?=?require('gulp-rename');
const?uglify?=?require('gulp-uglify');
const?sourcemaps?=?require('gulp-sourcemaps');
function?javascript()?{
??return?src(['src/js/*.js',?'!src/js/*.min.js'])?//1.创建一个流，从src读取
????//2.创建sourcemap
????.pipe(sourcemaps.init())?
????//pipe为gulp内的一个方法
????//用于流之间的链接
????//?3.?压缩文件
????.pipe(uglify())
????//4.重命名，名称后加min.js
????.pipe(rename({
??????extname:?'.min.js'
????}))
????//5.将sourcemap写入
????.pipe(sourcemaps.write('./'))
????//?6.将文件写入build/js目录下
????.pipe(dest('build/js'))
}
exports.javascript?=?javascript;
控制台输入指令gulp javascript
在build/js下会生成两个文件index.min.js 以及index.min.js.map
2.处理css
压缩css、创建sourcemap、重命名css
const?{
??src,
??dest
}?=?require('gulp');
const?minifyCSS?=?require('gulp-clean-css');
const?sourcemaps?=?require('gulp-sourcemaps');
const?autoprefixer?=?require('gulp-autoprefixer');
function?css()?{
??return?src('src/css/*.css')?//1.流入口文件
????//2.创建sourcemap
????.pipe(sourcemaps.init())
????//3.自动添加浏览器前缀
????.pipe(autoprefixer())
????//?4.压缩css
????.pipe(minifyCSS())
????//5.写入sourcemap
????.pipe(sourcemaps.write('./'))
????//6.写入文件
????.pipe(dest('build/css'))
}
exports.css?=?css;
控制台输入指令gulp css
在build/js下会生成两个文件index.min.css 以及index.min.css.map
3.处理图片
const?{
??src,
??dest
}?=?require('gulp');
const?imagemin?=?require('gulp-imagemin')
function?image()?{
??return?src('src/images/*.*')?//?1.?创建输入流
????//?2.?压缩图片
????.pipe(imagemin({
??????progressive:?true
????}))
????//?3.?写入文件
????.pipe(dest('build/images'))
}
exports.image?=?image;
控制台输入指令gulp image
[17:00:07]?Using?gulpfile?F:\gulp-demo\gulpfile.js
[17:00:07]?Starting?'image'...
[17:00:19]?gulp-imagemin:?Minified?3?images?(saved?449?kB?-?35.5%)
[17:00:19]?Finished?'image'?after?12?s
可以看到图片的压缩比例
4.处理less
const?{
??src,
??dest
}?=?require('gulp');
const?gulpLess?=?require('gulp-less');
const?minifyCss?=?require('gulp-clean-css')
const?sourcemaps?=?require('gulp-sourcemaps');
const?rename?=?require('gulp-rename');
function?less()?{
??return?src('src/less/**.less')?//1.创建输入流
????//2.创建sourcemap
????.pipe(sourcemaps.init())
????//3.less转为css
????.pipe(gulpLess())
????//4.压缩css
????.pipe(minifyCss())
????//5.修改名称
????.pipe(rename({extname:?'.min.css'}))
????//6.写入sourcemap
????.pipe(sourcemaps.write('./'))
????//7.写入文件
????.pipe(dest('build/less'))
}
exports.less?=?less;
控制台输入指令gulp less 在build/less下会生成两个文件index.min.css 以及index.min.css.map
基本使用介绍完毕，接下来咱们分别通过开发环境跟正式环境来配置gulp
开发环境：
开发环境需要:
- css浏览器前缀添加
- 热更新
- 静态服务器启动
相关配置:
const?gulp?=?require('gulp');
//内置方法
const?{
??series,
??parallel,
??watch,
??src,
??dest
}?=?require('gulp');
//工具
const?autoprefixer?=?require('gulp-autoprefixer');
const?include?=?require('gulp-file-include');
const?clean?=?require('gulp-clean');
//转码
const?less?=?require('gulp-less');
//浏览器
const?browserSync?=?require('browser-sync').create();
const?reload?=?browserSync.reload;
//源文件路径
const?srcPath?=?{
??root:?'src',
??html:?['src/**/*.html',?'!src/include/**/*.html'],
??images:?'src/images/*',
??css:?'src/css/*.css',
??less:?'src/less/*.less',
??js:?'src/js/*.js',
??library:?'src/library/*.js'
};
//开发生成路径
const?distPath?=?{
??root:?'dist',
??html:?'dist',
??images:?'dist/images',
??css:?'dist/css',
??less:?'dist/less',
??js:?'dist/js',
??library:?'dist/library',
??manifest:?'dist/**/*.json',
};
//开发环境
//css处理
function?cssDev()?{
??return?src(srcPath.css)
????.pipe(autoprefixer({
??????browsers:?['last?2?versions'],
??????cascade:?false,
????}))
????.pipe(dest(distPath.css))
????.pipe(reload({
??????stream:?true
????}))
}
//less处理
function?lessDev()?{
??return?src(srcPath.less)
????.pipe(less())
????.pipe(autoprefixer({
??????browsers:?['last?2?versions'],
??????cascade:?false,
????}))
????.pipe(dest(distPath.less))
????.pipe(reload({
??????stream:?true
????}))
}
//js处理
function?jsDev()?{
??return?gulp.src(srcPath.js)
????.pipe(dest(distPath.js))
????.pipe(reload({
??????stream:?true
????}))
}
//library?处理
function?libraryDev()?{
??return?src(srcPath.library)
????.pipe(dest(distPath.library))
????.pipe(reload({
??????stream:?true
????}))
}
//image?处理
function?imagesDev()?{
??return?src(srcPath.images)
????.pipe(dest(distPath.images))
????.pipe(reload({
??????stream:?true
????}))
}
//html?处理
function?htmlDev()?{
??return?src(srcPath.html)
????.pipe(include({}))
????.pipe(dest(distPath.html))
????.pipe(reload({
??????stream:?true
????}))
}
//清除dist目录
function?cleanDir()?{
??return?src('dist/*')
????.pipe(clean({
??????read:?false
????}))
}
//静态服务器
function?browser()?{
??browserSync.init({
????server:?{
??????baseDir:?'./dist',
????}
??})
??watchDev();
}
function?watchDev()?{
??console.log("开始监控")
??watch(srcPath.css,?function(cb)?{
????cssDev()
??});
??watch(srcPath.less,?function(cb)?{
????lessDev()
??});
??watch(srcPath.html,?function(cb)?{
????htmlDev()
??});
??watch(srcPath.js,?function(cb)?{
????jsDev()
??});
??watch(srcPath.library,?function(cb)?{
????libraryDev()
??});
??watch(srcPath.images,?function(cb)?{
????imagesDev()
??});
}
exports.dev?=?series(cleanDir,?parallel(libraryDev,?cssDev,?lessDev,?imagesDev,?jsDev,?htmlDev),?browser)
在控制台输入gulp dev,浏览器会启动，默认端口号：3000，文件更新后会监听到并更新。
生产环境
生产环境需要：
- 代码压缩
- js、css生成hash名称
- css添加前缀
- 图片压缩
const?gulp?=?require('gulp');
const?{
??series,
??parallel,
??watch,
??src,
??dest
}?=?require('gulp');
//工具
const?autoprefixer?=?require('gulp-autoprefixer');
const?include?=?require('gulp-file-include');
const?clean?=?require('gulp-clean');
//转码
const?less?=?require('gulp-less');
const?babel?=?require('gulp-babel');
const?css_base64?=?require('gulp-css-base64');
//压缩优化
const?minifyHtml?=?require('gulp-htmlmin');
const?minifyImage?=?require('gulp-imagemin');
const?minifyJs?=?require('gulp-uglify');
const?minifyCss?=?require('gulp-clean-css');
//版本控制
const?rev?=?require('gulp-rev');
const?revCollector?=?require('gulp-rev-collector');
const?delOriginal?=?require('gulp-rev-delete-original');
//浏览器
const?browserSync?=?require('browser-sync').create();
const?reload?=?browserSync.reload;
//源文件路径
const?srcPath?=?{
??root:?'src',
??html:?['src/**/*.html',?'!src/include/**/*.html'],
??images:?'src/images/*',
??css:?'src/css/*.css',
??less:?'src/less/*.less',
??js:?'src/js/*.js',
??library:?'src/library/*.js'
};
//生产生成路径
const?buildPath?=?{
??root:?'build',
??html:?'build',
??images:?'build/images',
??css:?'build/css',
??less:?'build/less',
??js:?'build/js',
??library:?'build/library',
??manifest:?'build/**/*.json',
};
//生产环境
//第三方库
function?libraryBuild()?{
??return?src(srcPath.library)
????.pipe(minifyJs())
????.pipe(dest(buildPath.library));
}
//css处理
function?cssBuild()?{
??return?src([buildPath.manifest,?buildPath.css?+?'/*.css'])
????.pipe(revCollector())
????.pipe(rev())
????.pipe(delOriginal())
????.pipe(dest(buildPath.css))
????.pipe(rev.manifest())
????.pipe(dest(buildPath.css))
}
function?cssCompile()?{
??return?src([srcPath.css])
????.pipe(css_base64({
??????maxWeightResource:?8?*?1024,
????}))
????.pipe(autoprefixer())
????.pipe(minifyCss())
????.pipe(dest(buildPath.css))
}
//less处理
function?lessBuild()?{
??return?src([buildPath.manifest,?buildPath.less?+?'/*.css'])
????.pipe(revCollector())
????.pipe(rev())
????.pipe(delOriginal())
????.pipe(dest(buildPath.less))
????.pipe(rev.manifest())
????.pipe(dest(buildPath.less))
}
function?lessCompile()?{
??return?src([srcPath.less])
????.pipe(css_base64({
??????maxWeightResource:?8?*?1024,
????}))
????.pipe(less())
????.pipe(autoprefixer())
????.pipe(minifyCss())
????.pipe(dest(buildPath.less))
}
//js处理
function?jsBuild()?{
??return?src(srcPath.js)
????.pipe(babel({
??????presets:?['env'],
????}))
????.pipe(minifyJs())
????.pipe(rev())
????.pipe(dest(buildPath.js))
????.pipe(rev.manifest())
????.pipe(dest(buildPath.js))
}
//image?处理
function?imagesBuild()?{
??return?src(srcPath.images)
????.pipe(minifyImage())
????.pipe(rev())
????.pipe(dest(buildPath.images))
????.pipe(rev.manifest())
????.pipe(dest(buildPath.images))
}
//html?处理
function?htmlBuild()?{
??return?src([buildPath.manifest,?...srcPath.html])
????.pipe(include({}))
????.pipe(revCollector({
??????replaceReved:?true,
????}))
????.pipe(minifyHtml({
??????collapseWhitespace:?true,
????}))
????.pipe(dest(buildPath.html))
}
//清除build目录
function?cleanBuild()?{
??return?src('build/*')
????.pipe(clean({
??????read:?false
????}))
}
//清除manifest
function?cleanManifest()?{
??return?src('build/**/*.json')
????.pipe(clean({
??????read:?false
????}))
}
exports.build?=?series(cleanBuild,?imagesBuild,?jsBuild,?libraryBuild,?lessCompile,??lessBuild,?cssCompile,?cssBuild,?htmlBuild,
??cleanManifest)
控制台输入gulp build就会生成build目录，将生成后的目录上传至服务器即可
[20:27:33]?Using?gulpfile?F:\gulp-demo\gulpfile.js
[20:27:33]?Starting?'build'...
[20:27:33]?Starting?'cleanBuild'...
[20:27:33]?Finished?'cleanBuild'?after?37?ms
[20:27:33]?Starting?'imagesBuild'...
[20:27:45]?gulp-imagemin:?Minified?2?images?(saved?174?kB?-?21.5%)
[20:27:45]?Finished?'imagesBuild'?after?12?s
[20:27:45]?Starting?'jsBuild'...
[20:27:46]?Finished?'jsBuild'?after?832?ms
[20:27:46]?Starting?'libraryBuild'...
[20:27:46]?Finished?'libraryBuild'?after?3.77?ms
[20:27:46]?Starting?'lessCompile'...
[20:27:46]?Finished?'lessCompile'?after?66?ms
[20:27:46]?Starting?'lessBuild'...
[20:27:46]?Finished?'lessBuild'?after?18?ms
[20:27:46]?Starting?'cssCompile'...
[20:27:46]?Finished?'cssCompile'?after?8.67?ms
[20:27:46]?Starting?'cssBuild'...
[20:27:46]?Finished?'cssBuild'?after?13?ms
[20:27:46]?Starting?'htmlBuild'...
[20:27:46]?Finished?'htmlBuild'?after?23?ms
[20:27:46]?Finished?'build'?after?13?s