为了提高打开速度,将js 和 css 分别压缩到一个文件里面。
参考:http://www.w3ctech.com/topic/134
1.安装Gulp全局包:
npm install -g gulp 执行完成后
2.在项目根目录新建gulpfile.js,内容如下:
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var gutil = require('gulp-util');
var bower = require('bower');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
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('minjs', function() {
return gulp.src(['app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-cookies/angular-cookies.min.js',
'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'app/bower_components/angular-animate/angular-animate.min.js',
'app/bower_components/jquery/dist/jquery.min.js',
'app/app.js',
]) //注意,此处特意如此,避免顺序导致的问题
.pipe(ngAnnotate())
.pipe(ngmin({dynamic: false}))
.pipe(stripDebug())
.pipe(uglify({outSourceMap: false}))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('app/js/'))
});
gulp.task('mincss', function() {
return gulp.src([
'app/bower_components/html5-boilerplate/dist/css/normalize.css',
'app/bower_components/html5-boilerplate/dist/css/main.css',
'app/app.css',
'app/views/css/bootstrap.css', // 可以使用通配符
]) //注意,此处特意如此,避免顺序导致的问题
.pipe(minifyCss()) //执行压缩
.pipe(concat('all.min.css'))
.pipe(gulp.dest('app/css/'))
});
3.在项目根目录下,分别执行以下命令, 安装各个插件
sudo npm install --save-dev gulp
sudo npm install --save-dev gulp-ng-annotate
sudo npm install --save-dev gulp-util
sudo npm install --save-dev bower
sudo npm install --save-dev gulp-uglify
sudo npm install --save-dev gulp-concat
sudo npm install --save-dev gulp-minify-css
sudo npm install --save-dev gulp-rename
sudo npm install --save-dev shelljs
sudo npm install --save-dev gulp-ngmin
sudo npm install --save-dev gulp-strip-debug
4.在项目根目录下,命令行执行 gulp minjs 和 gulp mincss,分别生成js/all.min.js 和 css/all.min.css