gulp压缩整站方法(html/css/js/image)

注入package.json(此json文件需要自己在当前项目目录下创建即可--不能有注释)安装:

npm install gulp-uglify --save-dev

全局安装:

npm install gulp-uglify -g

整站静态文件压缩配置文件gulpfile.js(html/css/image/js; 前提是安装下列require用到的模块):

var gulp = require('gulp'),//基础库

    htmlmin = require('gulp-htmlmin'),//html压缩

cssmin = require('gulp-minify-css'),//css压缩

jshint = require('gulp-jshint'),//js检查

uglify = require('gulp-uglify'),//js压缩

imagemin = require('gulp-imagemin'),//图片压缩

    pngquant = require('imagemin-pngquant'),//图片深入压缩

imageminOptipng = require('imagemin-optipng'),

    imageminSvgo = require('imagemin-svgo'),

    imageminGifsicle = require('imagemin-gifsicle'),

    imageminJpegtran = require('imagemin-jpegtran'),

domSrc = require('gulp-dom-src'),

cheerio = require('gulp-cheerio'),

processhtml = require('gulp-processhtml'),

Replace = require('gulp-replace'),

cache = require('gulp-cache'),//图片压缩缓存

clean = require('gulp-clean'),//清空文件夹

conCat = require('gulp-concat'),//文件合并

plumber=require('gulp-plumber'),//检测错误

gutil=require('gulp-util');//如果有自定义方法,会用到

var date = new Date().getTime();

gulp.task('clean',function(){

return gulp.src('min/**',{read:false})

.pipe(clean());

});

function errrHandler( e ){

    // 控制台发声,错误时beep一下

    gutil.beep();

    gutil.log(e);

this.emit('end');

}

gulp.task('cleanCash', function (done) {//清除缓存

    return cache.clearAll(done);

});

gulp.task('htmlmin', function () {

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: false,//省略布尔属性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: false,//删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        minifyCSS: true//压缩页面CSS

    };

    gulp.src(['index/*.htm','index/*.html'])

.pipe(plumber({errorHandler:errrHandler}))

.pipe(Replace(/_VERSION_/gi, date))

.pipe(processhtml())

        .pipe(htmlmin(options))

        .pipe(gulp.dest('min'));

});

gulp.task('cssmin', function(){

    gulp.src('index/**/*.css')

.pipe(conCat('css/index.min.css'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cssmin({

            advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]

            compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]

            keepBreaks: false,//类型:Boolean 默认:false [是否保留换行]

            keepSpecialComments: '*'

            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀

        }))

        .pipe(gulp.dest('min'));

});

gulp.task('jsmin', function () {

    gulp.src(['index/js/*.js','!index/**/{text1,text2}.js'])

.pipe(conCat('js/index.min.js'))

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(uglify({

            mangle: {except: ['require' ,'exports' ,'module' ,'$']},//类型:Boolean 默认:true 是否修改变量名

            compress: true,//类型:Boolean 默认:true 是否完全压缩

            preserveComments: 'false' //保留所有注释

        }))

        .pipe(gulp.dest('min'));

}); 

gulp.task('imagemin', function () {

    gulp.src('index/**/*.{png,jpg,gif,ico}')

.pipe(plumber({errorHandler:errrHandler}))

        .pipe(cache(imagemin({

            progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片         

svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性

            use: [pngquant(),imageminJpegtran({progressive: true})

            , imageminGifsicle({interlaced: true}),imageminOptipng({optimizationLevel:3}), imageminSvgo()] //使用pngquant深度压缩png图片的imagemin插件         

        })))

        .pipe(gulp.dest('min'));

});

gulp.task('default',['clean'],function(){

gulp.start('cssmin','htmlmin','jsmin','imagemin');

});


package.json(例子) package.json详细介绍:https://docs.npmjs.com/files/package.json

(package.json  npm init 命令行创建文件方法http://blog.csdn.net/liyanhui1001/article/details/44020235 )

{

  "name": "web",

  "version": "1.0.0",

  "description": "my text",

  "main": "gulpfile.js",

  "dependencies": {

    "gulp": "^3.9.1",

    "gulp-cache": "^0.4.5",

    "gulp-concat": "^2.6.0",

    "gulp-htmlmin": "^2.0.0",

    "gulp-imagemin": "^3.0.1",

    "gulp-jshint": "^2.0.1",

    "gulp-minify-css": "^1.2.4",

    "gulp-plumber": "^1.1.0",

    "gulp-uglify": "^1.5.4",

    "gulp-util": "^3.0.7",

    "imagemin-pngquant": "^5.0.0",

    "jshint": "^2.9.2",

    "gulp-clean": "^0.3.2"

  },

  "devDependencies": {

    "gulp-cheerio": "^0.6.2",

    "gulp-dom-src": "^0.2.0",

    "gulp-jslint": "^1.0.1",

    "gulp-processhtml": "^1.1.0",

    "gulp-rename": "^1.2.2",

    "gulp-replace": "^0.5.4",

    "gulp-webpack": "^1.5.0",

    "imagemin-gifsicle": "^5.1.0",

    "imagemin-jpegtran": "^5.0.2",

    "imagemin-optipng": "^5.1.1",

    "imagemin-svgo": "^5.1.0",

    "webpack": "^1.13.1"

  },

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [

    "web"

  ],

  "author": "yl",

  "license": "ISC"

}

devDependencies里的内容即为你安装gulp的模块插件名称和版本号!


最后,node.js里指定到当前项目目录下输入gulp命令即可:

gulp default

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容