内容简介:使用gulp压缩js和css等资源文件
首先照着官网的 开始步骤 , 将gulp跑起来.
以下代码一共实现:
- js es2016格式转es2015
- js压缩
- css压缩
- 图片压缩
- js&css文件自动增加md5后缀
package.json
{ "name": "dms", "version": "0.0.0", "private": true, "dependencies": { "babel-preset-es2015": "^6.18.0", "gulp-babel": "^6.1.2", "gulp-imagemin": "^3.1.1", "gulp-minify-css": "^1.2.4", "gulp-rename": "^1.2.2", "gulp-uglify": "^2.0.0", "imagemin-pngquant": "^5.0.0", "pump": "^1.0.2", "gulp-rev": "^7.1.2", "gulp-rev-collector": "^1.1.1" }, "devDependencies": { "babel-preset-es2015": "^6.18.0", "gulp-babel": "^6.1.2" } }
gulpfile.js
var gulp = require('gulp'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), cssmin = require('gulp-minify-css'), imagemin = require('gulp-imagemin'), pngquant = require('imagemin-pngquant'), babel = require('gulp-babel'), rev = require('gulp-rev'), //- 对文件名加MD5后缀 revCollector = require('gulp-rev-collector'), //- 路径替换 pump = require('pump'); gulp.task('default', ['uglify','images','cssmin']); gulp.task('all', ['images', 'replacejslink']); //JS压缩 gulp.task('uglify', function(cb) { // return gulp.src(['./js/**/*.js', '!./js/**/jquery*', '!./js/**/*.min.js','!./js/**/slideshow.js'], {base: '.'}) // .pipe(uglify()) // .pipe(babel({ // presets: ['es2015'] // })) // .pipe(gulp.dest('.')); pump([ gulp.src(['./js/**/*.js', '!./js/**/jquery*', '!./js/**/*.min.js','!./js/**/slideshow.js','!./js/background/plan/ChannelTaskPage.js','!./js/background/plan/InnerTaskPage.js','!./js/plan/ChannelPlanHandInPage.js','!./js/plan/ChannelPlanCheckPage.js','!./js/common/CustomerSearch.js'], {base: '.'}), babel({ presets: ['es2015'] }), uglify(), gulp.dest('.') ], cb ); }); //CSS压缩 gulp.task('cssmin', function() { return gulp.src('./css/**/*.css', {base: '.'}) .pipe(cssmin()) .pipe(gulp.dest('.')); }); //图片压缩 gulp.task('images', function() { // return gulp.src('./images/*.*') // .pipe(imagemin({ // progressive: false//,//类型:Boolean 默认:false 无损压缩jpg图片 // // use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件 // })) // .pipe(gulp.dest('./images/')); }); // CSS MD5 gulp.task('cssmd5',['cssmin'], function(){ return gulp.src('./css/**/*.css', {base: '.'}) .pipe(rev()) .pipe(gulp.dest('.')) .pipe(rev.manifest()) .pipe(gulp.dest('./rev/css')); }); // JS MD5 gulp.task('jsmd5',['uglify'], function(){ return gulp.src(['./js/**/*.js', '!./js/**/jquery*', '!./js/**/*.min.js','!./js/**/slideshow.js','!./js/background/plan/ChannelTaskPage.js','!./js/background/plan/InnerTaskPage.js','!./js/plan/ChannelPlanHandInPage.js','!./js/plan/ChannelPlanCheckPage.js','!./js/common/CustomerSearch.js'], {base: '.'}) .pipe(rev()) .pipe(gulp.dest('.')) .pipe(rev.manifest()) .pipe(gulp.dest('./rev/js')); }); // replace css link gulp.task('replacecsslink',['cssmd5'], function(){ return gulp.src(['./rev/css/*.json','./../**/*.jsp'], {base: '.'}) .pipe(revCollector()) .pipe(gulp.dest('.')); }); // replace js link gulp.task('replacejslink',['jsmd5','replacecsslink'], function(){ return gulp.src(['./rev/js/*.json','./../**/*.jsp'], {base: '.'}) .pipe(revCollector()) .pipe(gulp.dest('.')); }); gulp.task('build', ['uglify','images','cssmin']);
其中执行 gulp all
将会增加md5后缀, 而命令 gulp
不会.
执行gulp all的时候, 因为会生成大量的md5后缀的文件, 为了便于以后的持续集成, 在部署完后, 建议直接删除js 和css 文件夹即可, 或者使用 gulp-dev
插件
目录结构(部分)
. ├── css │ ├── amazeui.min.css │ ├── background │ ├── base.css │ └── common.css ├── gulpfile.js ├── images │ ├── 0000.png │ ├── 2202.jpg │ ├── 2212.jpg │ ├── 2306.jpg │ └── 2413.jpg ├── jedate │ ├── jquery-1.7.2.js │ ├── jquery.jedate.js │ ├── jquery.jedate.min.js │ └── skin ├── js │ ├── ajaxfileupload.js │ ├── amazeui.min.js │ └── background ├── layer │ ├── layer.js │ └── skin ├── package.json └── sweetAlert ├── sweet-alert.css ├── sweet-alert.js └── sweet-alert.min.js
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- golang压缩和解压缩zip文件
- 一句话轻松实现压缩图片和文件压缩
- golang 创建压缩文件
- Linux——文件与文件系统的压缩,打包与备份
- StreamingFileSink 压缩与合并小文件
- 利用“已知明文攻击”破解加密的压缩文件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
面向对象分析与设计
Grady Booch、Robert A. Maksimchuk、Michael W. Engel、Bobbi J. Young、Jim Conallen、Kelli A. Houston / 王海鹏、潘加宇 / 人民邮电出版社 / 2009-8 / 79.00元
《面向对象分析与设计(第3版)》是UML创始人Grady Booch的代表作之一,书中介绍的概念都基于牢固的理论基础。同时,《面向对象分析与设计(第3版)》又是一本注重实效的书,面向架构师和软件开发者等软件工程实践者的实际需要。《面向对象分析与设计(第3版)》通过大量例子说明了基本概念,解释了方法,并展示了在不同领域的成功应用。全书分为理论和应用两部分。理论部分深刻剖析了面向对象分析与设计(OOA......一起来看看 《面向对象分析与设计》 这本书的介绍吧!