html js & css 压缩

为了提高打开速度,将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










你可能感兴趣的:(html)