gulp之自动化压缩合并加版本号
来源:互联网 发布:企业宣传片 知乎 编辑:程序博客网 时间:2024/06/05 07:07
gulp之自动化压缩合并加版本号
这个方案主要是为了实现js/css/image的压缩合并、自动添加版本号、自动加浏览器前缀和压缩html。
- gulp-sequence //顺序执行任务
- gulp-csso //css压缩
- gulp-jshint //js检查
- gulp-uglify’), //js压缩
- gulp-imagemin //压缩图片
- gulp-htmlmin //压缩html
- gulp-clean //清空文件夹
- gulp-rev //更改版本名 md5后缀
- gulp-autoprefixer //加浏览器前缀
- gulp-rev-collector //gulp-rev 的插件,用于html模板更改引用路径
目录结构
|- root
| |-dist //此目录为下面生成的
| |-css
| |-js
| |-images
| |-rev
| |-index.html
| |-node_modules
| |-src //资源目录
| |-css
| |-js
| |-images
| index.html
| gulpfile.js
| package.json
gulpfile.js文件
var gulp = require('gulp'), gulpSequence = require('gulp-sequence'), //同步执行任务 csso = require('gulp-csso'), //css压缩 jshint = require('gulp-jshint'), //js检查 uglify = require('gulp-uglify'), //js压缩 imageMin = require('gulp-imagemin'), //压缩图片 htmlMin = require('gulp-htmlmin'), //压缩html clean = require('gulp-clean'), //清空文件夹 rev = require('gulp-rev'), //更改版本名 md5后缀 autoFx = require('gulp-autoprefixer'), //加浏览器前缀 revCollector = require('gulp-rev-collector'); //gulp-rev 的插件,用于html模板更改引用路径
//清空文件夹gulp.task('clean', function(){ return gulp.src('dist', {read:false}) .pipe(clean());});
//压缩css/加浏览器前缀gulp.task('css', function(){ return gulp.src('src/css/*.css') .pipe(autoFx({ browsers: ['last 2 versions', 'Android >= 4.0'] })) .pipe(csso()) .pipe(rev()) .pipe(gulp.dest('dist/css')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/css'));});
//压缩jsgulp.task('js', function(){ return gulp.src('src/js/*.js') .pipe(uglify()) .pipe(rev()) .pipe(gulp.dest('dist/js')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/js'));});
//压缩imagegulp.task('image', function(){ return gulp.src('src/images/*.{png,jpg,gif,ico}') .pipe(imageMin({ optimizationLevel: 5, progressive: true, interlaced: true, multipass: true })) .pipe(rev()) .pipe(gulp.dest('dist/images')) .pipe(rev.manifest()) .pipe(gulp.dest('dist/rev/images'));});
//改变css引用路径gulp.task('revCss',function(){ return gulp.src(['dist/rev/**/*.json','dist/css/*.css']) .pipe(revCollector({ replaceReved: true })) .pipe(gulp.dest('dist/css'));});
//改变html引用路径gulp.task('rev', function(){ return gulp.src(['dist/rev/**/*.json','src/*.html']) .pipe(revCollector({ replaceReved: true })) .pipe(htmlMin()) .pipe(gulp.dest('dist/'));});
gulp.task('default', gulpSequence('clean', 'css', 'js', 'image', 'revCss', 'rev')); //按顺序执行任务
ok! 有问题,不懂的,错误,请大家积极留言!
阅读全文
0 0
- gulp之自动化压缩合并加版本号
- gulp自动化压缩合并、加版本号解决方案
- Gulp编译、合并、压缩
- 使用gulp压缩合并代码
- Gulp安装、编译、合并、压缩
- 前端自动化之--gulp
- 自动化工具之gulp
- gulp 压缩合并Css 混淆压缩js
- gulp合并压缩JS和CSS
- gulp 静态资源打包 压缩 合并
- gulp JS文件合并和压缩
- gulp教程之gulp-imagemin压缩图片
- gulp教程之gulp-imagemin压缩图片
- gulp自动化添加版本号并修改为参数格式
- gulp系列之 静态资源打包压缩合并MD5版本控制
- gulp教程之 gulp-concat(合并文件)
- Gulp前端自动化之 ejs插件使用
- nodejs之gulp自动化构建工具
- 关于字符串的截取问题
- MySQL JOIN原理
- Spark MLlib源代码解读之朴素贝叶斯分类器,NaiveBayes
- 程序员10月书讯
- linux下C语言判断网络是否连接
- gulp之自动化压缩合并加版本号
- Java对象序列化
- 目前指令集合
- 712. Minimum ASCII Delete Sum for Two Strings
- Python中的join()函数的用法
- 重定向
- 推荐 VS使用技巧分享
- PHP中include 与 require 的区别
- jQuery noConflict()