使用gulp对js、css、img进行合并压缩
1 概述
最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js、css、img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢。有尝试过使用异步加载,但因为AngularJS对异步加载不是很好,需要引入第三方库,会更复杂,而且文件数量没有减少,本质上没有变。然后通过尝试合并压缩js/css、压缩img来减少文件数量和文件大小,最终使得加载速度大大提高。下面记录一下整个优化的过程。
2 步骤摘要
(1)安装nodejs
(2)安装gulp及其他插件:gulp-minify-css、gulp-uglify、gulp-imagemin、gulp-concat、gulp-rename
(3)编写gulpfile.js
(4)执行gulp开始合并压缩
(5)引用合并压缩后的JS/CSS文件
3 安装nodejs
环境:window 10, 64位
nodejs版本:node-v6.2.0-x64.msi
直接双击默认安装即可,通过node -v验证是否安装成功。
4 安装gulp及其他插件
通过包管理工具npm安装gulp及其他插件。以下都是CMD命令,都是在UI项目目录下执行。
(1)安装gulp,执行命令npm install gulp --save-dev (项目环境)
(2)安装css压缩插件gulp-minify-css,命令npm install gulp-minify-css --save-dev
(3)安装js压缩插件gulp-uglify,命令npm install gulp-uglify --save-dev
(4)安装img压缩插件gulp-imagemin,命令npm install gulp-imagemin --save-dev
(5)安装html压缩插件gulp-htmlmin,命令npm install gulp-htmlmin --save-dev
(6)安装文件合并插件gulp-concat,命令npm install gulp-concat --save-dev
(7)安装文件重命名插件gulp-rename,命令npm install gulp-rename --save-dev
5 编写gulpfile.js
在UI目录下,新建编写gulpfile.js文件
5.1 引入依赖插件
// 引入依赖插件
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var img = require('gulp-imagemin');
var htmlmin = require('gulp-htmlmin');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
5.2 合并压缩库的JS文件
// 合并压缩库的JS文件
gulp.task('minjs_lib', function() { return gulp.src(['angular.min.js','angular-sanitize.min.js','angular-translate.min.js','jquery-2.2.2.min.js','jquery.i18n.properties-min-1.0.9.js','jquery.json.min.js','angular-ui-router.js','ui-bootstrap-tpls.js','bootstrap.min.js'],{ cwd: 'rcclib' })
.pipe(concat('libs.js'))
.pipe(gulp.dest('public'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('public'));
});
5.3 合并压缩业务相关JS文件
// 合并压缩业务相关JS文件
gulp.task('minjs_my', function() { return gulp.src('main/**/*.js')
.pipe(concat('my.js'))
.pipe(gulp.dest('public'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify({mangle:false}))
.pipe(gulp.dest('public'));
});
5.4 合并压缩业务相关CSS
// 合并压缩业务相关css
gulp.task('mincss_my', function() { return gulp.src('main/**/*.css')
.pipe(concat('my.css'))
.pipe(gulp.dest('public'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('public'));
});
5.5 压缩图片文件
// 压缩image
gulp.task('minimg_my', function() { return gulp.src('res/**/*.{jpg,png,gif}', { base: 'res' })
.pipe(img())
.pipe(gulp.dest('res'));
});
5.6 执行任务
gulp.task('default', function() { gulp.start('minjs_lib', 'minjs_my', 'mincss_my', 'minimg_my');
});
6 执行gulp开始合并压缩
在CMD命令行里,切换到UI目录,执行gulp命令就开始合并压缩过程
7 引用合并压缩后的JS/CSS文件
在index.html页面中引入压缩后的js/css文件
<script type="text/javascript" src="public/libs.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"> <script src="public/my.min.js"></script>
<link rel="stylesheet" href="public/my.min.css">
8 总结
以下只是个人实验的总结,也是刚接触web前端不久,不一定完全正确,如有误请指出。
(1)AngularJs对异步加载的支持不是很好,不能动态配置路由。
(2)中小项目没有必要使用异步加载,效果不明显,反而使代码复杂化。
(3)通过合并js/css文件减少文件加载,从而减少网络连接,能明显加快加载速度。
(4)html页面进行压缩后,不能正常显示。而且也没有必要进行压缩,因为是需要时再加载,影响不大。
使用gulp对js、css、img进行合并压缩的更多相关文章
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- php js css加载合并函数 宋正河整理
<?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true); ...
- gulp 对js\css进行md5 加密
有的服务器为了网站加载速度,会做服务器缓存,这样就会出现代码出现引用地址没变,新代码不生效,而我们又希望新代码可以及时生效,这样我们就需要避免缓存,当然也有很多方法,本文只介绍使用gulp-rev(对 ...
- gulp打包js/css时合并成一个文件时的顺序解决
1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- JS&CSS文件请求合并及压缩处理研究(一)
在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...
- 介绍一种基于gulp对seajs的模块做合并压缩的方式
之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...
- JS&CSS文件请求合并及压缩处理研究(三)
上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...
- JS&CSS文件请求合并及压缩处理研究(四)
本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualSt ...
- JS&CSS文件请求合并及压缩处理研究(二)
上篇交待了一些理论方面的东西,并给出了另外一种解决方案的处理流程.本篇将根据该处理流程,开始代码方面的编写工作. 1,打开VS,新建ASP.NET MVC Web项目,项目类型选择空.名称为 Mcmu ...
随机推荐
- 源码编译安装mysql5.5.33
源码编译安装mysql5.5.33 一.安装cmake编译工具 跨平台编译器 # yum install -y gcc* # yum install -y cmake 解决依赖关系 # yum ins ...
- 通达OA系统myisam转innodb引擎
OA系统切换到linux环境后,性能提升了2-3倍左右,随着公司的发展壮大,办公人员也会越来越多,当人数达到一定数量级别时如1500在线人数已无法支撑公司业务,就需要对系统进行性能提升优化. 当前OA ...
- Fragment的详细使用
一直在用Fragment,但是没有系统的整理过,Google了一下相关文章,看到了几篇,将几篇还不错的文章重点整理了下,很多是直接Copy的,只为做个笔记,以后翻来看比较方便,建议大家看一下下面几篇, ...
- Transformer+BERT+GPT+GPT2
Transformer: https://jalammar.github.io/illustrated-transformer/ BERT: https://arxiv.org/pdf/1810.04 ...
- vue2之对象属性的监听
对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...
- vue渲染时对象里面的对象的属性提示undefined,但渲染成功
场景: 从后台请求的数据结构如下: 我的list是对象,而comment又是list里的对象,渲染成功了,却报如下错: 解决办法: 添加一个:v-if
- java多线程快速入门(七)
什么是守护线程 守护线程是为用户线程服务的这么一个线程,主线程结束,守护线程也结束 package com.cppdy; class MyThread3 extends Thread{ @Overri ...
- poj1511,线段树扫描线面积
经典题,线段树扫描线其实类似区间更新,一般的做法是想象一根扫描线从上扫到下或者从左扫到右,本题的做法是从上扫到下 只要扫到了一根水平线,就将其更新到线段树对应区间中,区间和它的子区间是独立更新的 #i ...
- MySQL重复数据处理
最近工作很忙,很久没写博客,嘻嘻!今天写一遍关于MySQL重复数据处理的博客!前不久有个开发问我,能不能把重复的数据去除,留下唯一的数据.然后我问他为什么有这么重复的数据呢,他说写了程序去爬数据,爬到 ...
- find算法
find(beg, end, val) :根据equal操作符,循序查找[first, last)内所有的元素,找出第一个匹配“等同条件者”.如果找到,就返回一个指向钙元素的迭代器,否者返回迭代器 ...