使用gulp压缩并合并AngularJS代码

我们的移动web项目使用gulp作为自动化部署工具,由于移动设备4G流量费比较贵,一般我们做移动Web App项目正式发布时都需要把js代码进行压缩以便节省流量。包括使用的第三方js框架,正式发布时也应该使用压缩后的版本。对于自己写的js代码,因为现在是模块化开发,js文件比较多,需要先合并成一个文件后,去除log,进行压缩,基于gulp的管道式命令,实现这些还是很容易的。部分代码如下:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var ngmin = require('gulp-ngmin');
var stripDebug = require('gulp-strip-debug');
gulp.task('minify', function() {
    return gulp.src('./www/js/**/*.js')
        .pipe(ngmin({dynamic: false}))
        .pipe(stripDebug())
        .pipe(uglify({outSourceMap: false}))
        .pipe(concat('all.min.js'))
        .pipe(gulp.dest('./www/js/'))
});

需要的gulp插件可以在package.json文件(如下)配置后,通过npm install命令下载安装。

{
  "name": "ionic-project",
  "version": "1.0.0",
  "description": "An Ionic project",
  "dependencies": {
    "gulp": "^3.5.6",
    "gulp-sass": "^0.7.1",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  },
  "devDependencies": {
    "bower": "^1.3.3",
    "gulp-jshint": "^1.9.0",
    "gulp-ngmin": "^0.3.0",
    "gulp-replace": "^0.5.0",
    "gulp-rimraf": "^0.1.1",
    "gulp-strip-debug": "^1.0.2",
    "gulp-uglify": "^1.0.1",
    "gulp-util": "^2.2.14",
    "jshint-stylish": "^1.0.0",
    "shelljs": "^0.3.0"
  }
}
时间: 2024-10-13 21:27:39

使用gulp压缩并合并AngularJS代码的相关文章

gulp 入门---使用gulp压缩css

压缩 css 代码可降低 css 文件大小,提高页面打开速度. 规律转换为 gulp 代码 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切换到对应目录后进行安装操作. 在命令行输入 sudo npm install gulp-minify-css 二.创建 gulpfile.js 文件编写代码 在对应目录创建 gulpfile.js 文件并

使用 gulp 压缩 CSS

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切

使用 gulp 压缩图片

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin

Git的纯命令操作,Install,Clone , Commit,Push,Pull,版本回退,撤销更新,分支的创建/切换/更新/提交/合并,代码冲突

Git的纯命令操作,Install,Clone , Commit,Push,Pull,版本回退,撤销更新,分支的创建/切换/更新/提交/合并,代码冲突 这篇是接着上篇分布式版本库--Windows下Git的环境部署以及在GitHub上开源自己的项目讲的,上篇主要是说用GUI来图形化界面操作,但是一般我们程序员也不会这么干,用命令又轻松又愉悦,所以,这里我就再开了一篇来专门说一下纯命令是怎么去操作的,但是要注意哦,其实廖雪峰老师的网站就是非常赞的学习资源哦! 廖雪峰老师:http://www.li

正确的 zip 压缩与解压代码

网上流传的zip压缩与解压 的代码有很大的问题 虽然使用了ant进行压缩与解压,但是任务的流程还是用的java.util.zip 的方式写的,我在使用的过程中遇到了压缩的目录结构有误,甚至出现不同解压软件显示的目录结构不同的窘境. 下面给出使用org.apache.tools.ant.taskdefs.Zip;和org.apache.tools.ant.taskdefs.Expand 的压缩和解压过程. import java.io.File; import org.apache.tools.a

简单工厂和工厂模式的合并对比代码

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

linux下分卷压缩,合并解压的3种方法

我们上传东西的时候,由于文件过大而不能上传,或者不给上传,最明显的就是发邮件了,附件最大5M,有的10M.如果超过了就郁闷了.这个时候,如果能把压缩的东西,分割开来就比较爽了,windows下面我想大家知道怎么分割,利用winrar,winzip图型化设置压缩出来的块的大小.但是在linux下面有没有这样的方法了,linux下面有rar命令,有zip命令,windows下面这二种方式可以分割压缩,我想linux下面绝对也是可以的.下面是我尝试过程的记录: 一,rar分卷压缩和合并解压 rar -

grunt-contrib-cssmin CSS压缩以及合并

grunt-contrib-cssmin:压缩以及合并CSS文件 安装插件:npm install grunt-contrib-cssmin --save-dev 不设置compatibility与noAdvanced属性,运行后会有一些hack(*zoom:1;_zoom:1;\9等)会被删除. compatibility : 'ie8', //设置兼容模式 noAdvanced : true //取消高级特性 1.多个文件按照源文件名称压缩: cssmin: { options : { co

JAVA,使用ant-1.6.5,压缩、解压缩辅助类代码

有的时候,需要做文件的压缩.解压缩. java自身提供了已压缩,解压缩的原生类库.不过有开源代码的话,我一般是选择使用开源类库. 下面就贴一下,我使用ant-1.6.5的zip压缩.解压缩的代码吧. ZipUtil.java import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStr