使用Gulp进行代码压缩的步骤以及配置
一、安装步骤
1.首先确定是否安装了node.js,如果未安装,请先安装node.js;
2.确定是否安装了包管理工具npm,如未安装请安装:npm install npm -g;
3.安装gulp: npm install gulp --save-dev;(至于为什么是--save-dev,因为我们只是在开发环境中会用到,生产发布是用不到它的)
4.安装用于html、css、js代码压缩常用的插件,分别为:gulp-htmlmin、gulp-cssnano、gulp-uglify;
npm install --save-dev gulp-htmlmin;
npm install --save-dev gulp-cssnano;
npm install --save-dev gulp-uglify;
5.在根目录新建文件 gulpfile.js ,这个文件是使用gulp压缩的配置文件,相关配置如下;
'use strict'; var gulp = require('gulp'); //压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
gulp.src(['./src/app/*.html'])
.pipe(htmlmin({
collapseWhitespace: true,//压缩HTML
removeComments: true,//清除HTML注释
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest('dist/src/app'));
}); //压缩css
var cssnano = require('gulp-cssnano');
gulp.task('style', function(){
gulp.src(['./css/*.css'])
.pipe(cssnano())
.pipe(gulp.dest('dist/css'));
}); //压缩js
var uglify = require('gulp-uglify');
gulp.task('script', function(){
gulp.src(['./src/static/*.js'])
.pipe(uglify({
mangle: false// 跳过函数名,使其不被压缩,函数名也压缩可改为true
}))
.pipe(gulp.dest('dist/src/static'));
}); //同步代码变化
gulp.task('dist', function(){
gulp.watch(['./src/app/*.html'], ['html']);
gulp.watch(['./css/*.css'], ['style']);
gulp.watch(['./src/static/*.js'], ['script']);
}); gulp.task("default", ["html","style","script","dist"]);
6.初始化得到文件package.json:npm init ;(简单点一路回车即可)
7.一切妥当,命令行执行gulp,等待完成即可。
注:(1).这里的配置进行了适当简写,如果项目不是新建立的,而是在项目原有基础上增加页面,为了提升压缩效率可以不匹配所有的html、css、js文件,只配置你新增的文件即可,如下例子:
//压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('html', function(){
gulp.src(['./src/app/level2HK.html','./src/app/index.html'])
.pipe(htmlmin({
collapseWhitespace: true,//压缩HTML
removeComments: true,//清除HTML注释
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest('dist/src/app'));
});
gulp.src(['路径a','路径b'])中是支持数组形式入参的,当然也可以直接字符串入参 gulp.src('路径a')
(2)本处只列举了代码的初步压缩模块,适合刚刚接触gulp的初学者,其实gulp还有其他很多优秀的插件,如代码的合并、混淆等等插件,用户可以根据自己的项目实际需要进行安装并进行相应配置;
如:代码合并插件 gulp-concat;
文件名称修改插件 gulp-rename;
图片压缩插件 gulp-imagemin;
sass文件编译插件 gulp-sass;
检查改变状态 gulp-changed;
如下对js的压缩、合并、修改名称:
gulp.task('scripts', function() {
return gulp.src('./src/static/*.js')
.pipe(concat('main.js')) //合并所有js到main.js
.pipe(gulp.dest('./src/static')) //输出main.js到文件夹
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
.pipe(uglify()) //压缩
.pipe(gulp.dest('./src/static')); //输出
});
如下对图片的压缩配置:
// 压缩图片
gulp.task('images', function () {
gulp.src('./src/images/*.*')
.pipe(changed('dist/images', {hasChanged: changed.compareSha1Digest}))
.pipe(imageMin({
progressive: true,// 无损压缩JPG图片
svgoPlugins: [{removeViewBox: false}]// 不移除svg的viewbox属性
}))
.pipe(gulp.dest('dist/images'))
.pipe(browserSync.reload({stream:true}));
});
使用Gulp进行代码压缩的步骤以及配置的更多相关文章
- 使用gulp进行代码压缩
gulp是一个很不错的前端自动化工具,可以帮我们完成一些重复性操作,比如html.css和js代码的压缩.合并.混淆等,虽然这些操作可以通过一些在线工具帮我们实现,但不断重复地复制粘贴肯定比不上一句命 ...
- gulp做的前端代码压缩报错,揭示具体错误 信息
用gulp做的前端代码压缩,今天在打包的时候发现打包出错了.报的错误是--unable to minify JavaScript.但是至于为什么会不能打包,表示很困惑,然后通过一番搜索,最后得出了问题 ...
- UglifyJS--javascript代码压缩使用指南{转}
在线测试地址 http://lisperator.net/uglifyjs/下面都是基于linux系统的安装使用.UglifyJS是遵循了CommonJS规范写成的,可以在支持CommonJS模块系统 ...
- fis代码压缩
Fis代码压缩步骤 1,安装fis(http://fis.baidu.com/fis3/docs/beginning/install.html) fis安装支持的node版本:0.8x,0.10x,0 ...
- [转]gulp排除已压缩文件思路
文章转载至[gulp排除已压缩文件思路] gulp默认排除语法的弊端 有个时候我们需要时用gulp排除已经压缩过的js,css等.如果以压缩文件是以".min.js"之类命名规范的 ...
- Asp.Net MVC 页面代码压缩筛选器-自定义删除无效内容
Asp.Net MVC 页面代码压缩筛选器 首先定义以下筛选器,用于代码压缩. /*页面压缩 筛选器*/ public class WhiteSpaceFilter : Stream { privat ...
- 如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式
如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提 ...
- apicloud代码压缩和全局加密
首先说代码压缩,因为没什么用,就先说它了.代码压缩后,apicloud里面的css和js文件里面的空格呀回车呀都去掉了,就是文件小了,所有代码显示为一行了.这些代码的变量没有重命名,我们知道jquer ...
- 用ildasm/ilasm修改IL代码(操作步骤)
在开发中遇到这样一个场景,需要修改一个dll文件(.NET程序集)中某些地方的类型名称,但没有源代码,只能修改IL代码. 操作步骤如下: 1. 运行ildasm ildasm是由微软提供的.NET程序 ...
随机推荐
- AndroidStudio3更改包名失败
使用Android Studio 3.0 Beta6更改包名refactor---rename一直提示:Refactoring cannot be performedFile xxx\build\xx ...
- 无线渗透测试之wifi密码破解
[声明]:本文仅供个人学习使用,请勿违法破解他人wifi 测试工具: 1.CDlinux启动盘:(请参照https://my.oschina.net/u/3112136/blog/800713) 2. ...
- JAVA 二进制基础
主要内容 1.十进制二进制互转 2.二进制的位运算 3.JDK内置的进制转换 4.JAVA中的进制 十进制二进制互转 57 111001 二进制的位运算:优点:特定情况下,计算方便,被支持面广泛. ① ...
- [Android] Toast问题深度剖析(二)
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者: QQ音乐技术团队 题记 Toast 作为 Android 系统中最常用的类之一,由于其方便的api设计和简洁的交互体验,被我们所广泛采用 ...
- LeetCode - 540. Single Element in a Sorted Array
Given a sorted array consisting of only integers where every element appears twice except for one el ...
- PLECS—模型仿真——第十一周作业
1. 直流电机单闭环调速系统比例控制仿真 (1)整体电路图 (2)控制部分电路图 (3)参数设置+仿真结果 2. 直流电机单闭环调速系统比例积分控制仿真 (1)参数设置 (2)仿真结果 3. 直流电机 ...
- 记录一则fsck的简单案例
环境:RHEL 6.5 + ext4文件系统 我个人实验环境的一个虚拟机,开机时在Checking filesystems时,有报错: /dev/mapper/vg_linuxbase-lv_root ...
- Linux-PATH_环境变量
PATH变量 是linux系统里的一个环境变量,系统已经定义好了,我们不需要再定义. 作用: 是linux里使用的命令都存在在PATH变量后面指定的目录下,我们使用命令 ...
- 借腾讯开源 VasDolly,谈谈 Android 签名和多渠道打包的原理!
一.前言 Hi,大家好,我是承香墨影! 当我们需要发布一款 App 到应用市场的时候,一般需要我们针对不同的市场生产不同的渠道包,它们使用的是同一套代码,只是会包含一些各自的渠道信息,用于我们做数据分 ...
- url路径去掉两个opencms
采用刚刚的方法安装OpenCMS之后,站点url中会存在两个opencms,造成访问url路径过长,下面讲解一种去掉两个opencms的方法. 1.去掉第一个opencms 安装时采用ROOT安装,即 ...