gulp实战(3)
来源:互联网 发布:阿里云服务器打开端口 编辑:程序博客网 时间:2024/05/20 21:45
原码目录:src
打包目录:build
目标:src 中的 html 文件是未压缩的,打包至 build 目录后,生成压缩后的文件,名字与之前保持一致,html中的 js 及 css 需要同时被压缩
分析:
1. 打包时,build目录中可能已经存在上一次打包生成的旧文件,所以每次打包都应该先清理掉。
2. 打包时需要执行压缩操作
3. 打包后,每次修改 src 目录下的 html 文件,应该即时将修改部分重新打包
4. 打包时的执行顺序为:清理 -> 打包 -> 监控修改,而且后一步必须在前一步操作完成后才可以执行。
第一步:设置变量
var config = { src: "src", dest: "build"}
第二步:清理
涉及插件 [ gulp-clean ]
gulp-clean:清理文件及文件夹
/** * 清理目标目录 */gulp.task('clean', function(cb) { pump([ gulp.src(config.dist), clean() ], cb)})
第三步:执行文件操作
涉及插件 [ gulp-htmlmin, gulp-changed]
gulp-htmlmin: 压缩HTML文件
gulp-changed: 只传递更改过的文件
/** * 执行html压缩 */gulp.task('minify:html', [], function(cb) { pump([ // 获取原目录下所有的html文件 gulp.src(config.src + "/**/*.html"), // 每次打包时,只打包内容发生改变的文件 changed(config.dist, { extension:'.html' }), // 执行html压缩 htmlmin({ removeComments: true, // 清除HTML注释 collapseWhitespace: true, // 压缩空格 collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> => <input checked> removeEmptyAttributes: true, // 删除所有空格作属性值 <input id=""> => <input> removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,// 删除<style>和<link>的type="text/css" minifyJS: true, // 压缩页面JS minifyCSS: true // 压缩页面CSS }), // 输出至目标目录 gulp.dest(config.dist) ], cb);});
第四步:监听文件变更
删除文件时似乎并不能被监听到
/** * 监听JS文件变改,即时调用任务执行JS增量打包 */gulp.task('watch', [], function(cb) { gulp.watch(config.src + "/**/*.html", ['minify:html']);});
第五步:安排执行顺序
涉及插件 [ run-sequence ]
run-sequence:任务同步
/** * 开始执行 */gulp.task('default', function(cb) { sequence('clean', 'minify:html', 'watch', cb);});
完整版文档
var gulp = require('gulp'), clean = require('gulp-clean'), changed = require('gulp-changed'), htmlmin = require('gulp-htmlmin'), pump = require('pump'), sequence = require('run-sequence');var config = { src: "src", dist: "build"}/** * 清理目标目录 */gulp.task('clean', function(cb) { pump([ gulp.src(config.dist), clean() ], cb)})/** * 执行html压缩 */gulp.task('minify:html', [], function(cb) { pump([ // 获取原目录下所有的html文件 gulp.src(config.src + "/**/*.html"), // 每次打包时,只打包内容发生改变的文件 changed(config.dist, { extension:'.html' }), // 执行html压缩 htmlmin({ removeComments: true, // 清除HTML注释 collapseWhitespace: true, // 压缩空格 collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> => <input checked> removeEmptyAttributes: true, // 删除所有空格作属性值 <input id=""> => <input> removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true,// 删除<style>和<link>的type="text/css" minifyJS: true, // 压缩页面JS minifyCSS: true // 压缩页面CSS }), // 输出至目标目录 gulp.dest(config.dist) ], cb);});/** * 监控 */gulp.task('watch', [], function(cb) { gulp.watch(config.src + "/**/*.html", ['minify:html']);});/** * 开始执行 */gulp.task('default', function(cb) { sequence('clean', 'minify:html', 'watch', cb);});
阅读全文
0 0
- gulp实战(3)
- 实战gulp
- Gulp配置实战
- gulp实战(1)
- gulp实战(2)
- gulp实战(4)
- gulp实战(5)
- 前端工程之构建工具-gulp实战
- 前端打包构建工具gulp入门实战
- gulp入门(3)- gulp-minify-css
- gulp入门(3)
- gulp
- Gulp
- gulp
- Gulp
- gulp
- gulp
- gulp
- 老师模拟练习增删
- pl/sql整库导出和导入
- 从四级区域中找到最后选中的一级
- 【算法】稳定匹配(C++版)
- Android读书笔记(四) LitePal、运行时权限、通知的几点说明
- gulp实战(3)
- Codeforces 877E Danil and a Part-time Job【Dfs序+线段树】
- adb 常用命名
- 达尔文OP2链接WIFI配置(自动连接)
- Gson教程十三:模型版本化、日期格式化、漂亮输出
- 一次python对dll的调用,传递string类型的参数作为调用函数的参数
- GlobalPlatform TEE Protection Profile (PP)Version 1.2.1 A.3 攻击路径举例(一)
- 使用小波变换重构某个节点的信号
- 获取外网本机的IP地址的方法