因最近开发几个ionic1项目,默认配置的gulp,对gulp已经非常熟悉,用实例来写一点教程,如有错误欢迎指正。
gulp作为自动化构建工具，虽然与webpack是属于两种不同类的工具，原理不同（webpack是模块化方案工具，gulp是自动化代替手工操作的工具），但都可以用来处理文件的编译压缩打包等工作，单纯从使用上来说，gulp配置更加方便快捷，代码更加简单易上手。
本项目中gulp执行顺序:
1.清除www项目
2.html压缩
3.复制图标文件
4.Js:ES6编译=>删除console(alert,debug)=>压缩=>合并=>混淆
5.合并压缩第三方库
6.图片:压缩
7.css:less编译=>合并=>删除重复样式=>添加MD5后缀
一.安装gulp
1.全局安装gulp
可先安装cnpm,用cnpm替代npm,安装速度快
npm install -g gulp
2.项目中安装gulp,写进项目package.json的依赖中
npm install --save-dev gulp
二.gulp主要API
1.gulp.task()定义任务
gulp.task(name,[deps, deps], fn)
name 为任务名,
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数.
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
2.gulp.src()找你需要操作的文件
3.gulp.dest()要生成的文件的位置
4.gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务
gulp.watch(同gulp.src()类似的文件路径, tasks)
tasks为gulp.task()中定义的任务名，为数组
5.pipe()
用于传递文件.
三.整个项目的实例如下
在gulpfile.js文件中修改
var gulp = require('gulp'),
cleanCss = require('gulp-clean-css'), //压缩清理css
rename = require('gulp-rename'), //重命名,项目中没有用到
babel = require('gulp-babel'), //编译ES6
plumber = require('gulp-plumber'), //捕获处理任务中的错误
minifyHtml = require('gulp-minify-html'), //压缩html
less = require('gulp-less'), //获取gulp-less模块
uglify = require('gulp-uglify'), //js文件压缩混淆
concat = require('gulp-concat'), //合并文件
imagemin = require('gulp-imagemin'), //图片压缩
clean = require('gulp-clean'), //删除项目
rev = require('gulp-rev'), //- 对文件名加MD5后缀
revCollector = require('gulp-rev-collector'), //- 路径替换
gulpSequence = require('gulp-sequence'), //同步执行
stripDebug = require('gulp-strip-debug'); //删除console,alert等
var paths = {
es6: ['./src/**/*.js', '!./src/common/lib/*.js'],
vendor: ['./src/common/lib/*.js', '!./src/common/lib/ionic.bundle.js', '!./src/common/lib/less.min.js'],
less: ['./src/**/*.less'],
css: ['./src/common/lib/ionic.min.css', './rev/style.min.css'],
html: ['./src/**/*.html'],
img: ['./src/**/*.png', './src/**/*.jpg', './src/**/*.gif', ],
copyFonts: ['./src/common/css/fonts/*'],
};
//发布生产环境用 gulp
gulp.task('default', gulpSequence('clean', 'minify-html', 'copyFonts',
'babel', 'concatVendor', 'minify-img', 'revCss2'));
//平常只需更新html、css、js,用gulp test
gulp.task('test', gulpSequence('minify-html',
'babel', 'revCss2'));
// 1.清空
gulp.task('clean', function() {
return gulp.src(['./www'])
.pipe(clean());
});
//2.压缩html
gulp.task('minify-html', function() {
gulp.src(paths.html) // 要压缩的html文件
.pipe(minifyHtml()) //压缩
.pipe(gulp.dest('./www'));
});
// 3.复制图标文件
gulp.task('copyFonts', function() {
return gulp.src(paths.copyFonts)
.pipe(gulp.dest('./www/css/fonts'));
});
//4.Js:ES6编译=>删除console(alert,debug)=>压缩=>合并=>混淆
gulp.task('babel', function() {
return gulp.src(paths.es6)
.pipe(plumber())
.pipe(babel({ presets: ['env'] }))
.pipe(stripDebug())
.pipe(uglify())
.pipe(concat('build.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./www'));
});
//5.合并压缩第三方库
gulp.task('concatVendor', function() {
return gulp.src(paths.vendor)
.pipe(concat('vendor.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./www'));
});
//6.图片:压缩
gulp.task('minify-img', function() {
gulp.src(paths.img)
.pipe(imagemin())
.pipe(gulp.dest('./www'));
});
//7.css:less编译=>合并=>删除重复样式=>添加MD5后缀
gulp.task('less', function() {
return gulp.src(paths.less)
.pipe(less())
.pipe(concat('style.min.css'))
.pipe(cleanCss({
level: 2 //level2可合并去重,https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api
}))
.pipe(gulp.dest('./rev'));
});
gulp.task('concatCss', ['less'], function() {
return gulp.src(paths.css)
.pipe(concat('style.min.css'))
.pipe(rev())
.pipe(gulp.dest('./www/css'))
.pipe(rev.manifest('rev-css2-manifest.json')) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev'));
});
gulp.task('revCss2', ['concatCss'], function() {
gulp.src(['./rev/rev-css2-manifest.json', './www/*.html']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector({ replaceReved: true })) //- 执行文件内css名的替换
.pipe(gulp.dest('./www')); //- 替换后的文件输出的目录
});
//自动编译,不喜欢自动编译,关掉了
// gulp.watch(paths.es6, ['babel']);
// gulp.watch(paths.less, ['less']);
/*gulp.task('watch', ['babel','less'], function() {
// gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.es6, ['babel']);
gulp.watch(paths.less, ['less']);
});*/
四.打包前后对比
生产环境共引入以下文件
<!-- 生产环境 -->
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<script src="vendor.min.js"></script>
<script src="build.min.js"></script>
<script src="cordova.js"></script>
1.css处理:
less文件:
less文件大小
编译成css:271KB+ionic.min.css 195KB,共466KB
less编译成css文件大小
压缩合并后:共291KB,压缩38%;
合并压缩后的css
2.业务代码js源文件:
业务js文件
编译压缩合并后:压缩37%
业务js文件经gulp处理后
3.第三方库文件:
第三方库文件大小
合并压缩后:压缩32%
第三方库合并压缩后
4.图片压缩:21%;
图片压缩后
打包前后文件夹大小对比:
打包前后文件夹对比
网友评论