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进行合并压缩的更多相关文章

  1. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  2. php js css加载合并函数 宋正河整理

    <?php //php js css加载合并函数 宋正河整理 //转载请注明出处 define('COMBINE_JS',true); define('COMBINE_CSS',true);   ...

  3. gulp 对js\css进行md5 加密

    有的服务器为了网站加载速度,会做服务器缓存,这样就会出现代码出现引用地址没变,新代码不生效,而我们又希望新代码可以及时生效,这样我们就需要避免缓存,当然也有很多方法,本文只介绍使用gulp-rev(对 ...

  4. gulp打包js/css时合并成一个文件时的顺序解决

    1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js ...

  5. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  6. JS&CSS文件请求合并及压缩处理研究(一)

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...

  7. 介绍一种基于gulp对seajs的模块做合并压缩的方式

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块 ...

  8. JS&CSS文件请求合并及压缩处理研究(三)

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...

  9. JS&CSS文件请求合并及压缩处理研究(四)

    本篇将会尝试对之前的代码进行相关的单元测试,验证路径合并规则的覆盖率及正确性. 熟悉 ASP.NET MVC 开发的朋友应该知道,微软在MVC框架下集成了一款名为 Microsoft.VisualSt ...

  10. JS&CSS文件请求合并及压缩处理研究(二)

    上篇交待了一些理论方面的东西,并给出了另外一种解决方案的处理流程.本篇将根据该处理流程,开始代码方面的编写工作. 1,打开VS,新建ASP.NET MVC Web项目,项目类型选择空.名称为 Mcmu ...

随机推荐

  1. 源码编译安装mysql5.5.33

    源码编译安装mysql5.5.33 一.安装cmake编译工具 跨平台编译器 # yum install -y gcc* # yum install -y cmake 解决依赖关系 # yum ins ...

  2. 通达OA系统myisam转innodb引擎

    OA系统切换到linux环境后,性能提升了2-3倍左右,随着公司的发展壮大,办公人员也会越来越多,当人数达到一定数量级别时如1500在线人数已无法支撑公司业务,就需要对系统进行性能提升优化. 当前OA ...

  3. Fragment的详细使用

    一直在用Fragment,但是没有系统的整理过,Google了一下相关文章,看到了几篇,将几篇还不错的文章重点整理了下,很多是直接Copy的,只为做个笔记,以后翻来看比较方便,建议大家看一下下面几篇, ...

  4. Transformer+BERT+GPT+GPT2

    Transformer: https://jalammar.github.io/illustrated-transformer/ BERT: https://arxiv.org/pdf/1810.04 ...

  5. vue2之对象属性的监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  6. vue渲染时对象里面的对象的属性提示undefined,但渲染成功

    场景: 从后台请求的数据结构如下: 我的list是对象,而comment又是list里的对象,渲染成功了,却报如下错: 解决办法: 添加一个:v-if

  7. java多线程快速入门(七)

    什么是守护线程 守护线程是为用户线程服务的这么一个线程,主线程结束,守护线程也结束 package com.cppdy; class MyThread3 extends Thread{ @Overri ...

  8. poj1511,线段树扫描线面积

    经典题,线段树扫描线其实类似区间更新,一般的做法是想象一根扫描线从上扫到下或者从左扫到右,本题的做法是从上扫到下 只要扫到了一根水平线,就将其更新到线段树对应区间中,区间和它的子区间是独立更新的 #i ...

  9. MySQL重复数据处理

    最近工作很忙,很久没写博客,嘻嘻!今天写一遍关于MySQL重复数据处理的博客!前不久有个开发问我,能不能把重复的数据去除,留下唯一的数据.然后我问他为什么有这么重复的数据呢,他说写了程序去爬数据,爬到 ...

  10. find算法

     find(beg, end, val)  :根据equal操作符,循序查找[first, last)内所有的元素,找出第一个匹配“等同条件者”.如果找到,就返回一个指向钙元素的迭代器,否者返回迭代器 ...