gulp 壓縮js,css

　　最近作的前端項目中發現引用的js包太多，致使頁面加載時反應很慢，因此首先想到的是將js和css壓縮，提升加載速度。

　　咱們先來看看抓到的當前頁面響應時間：

　　

     頁面異步加載，須要響應時間 7.41秒，這也太慢了，實在受不了了。

     下面咱們引入gulp 對js作壓縮，gulp是基於Node.js的前端構建工具。因此首先須要安裝nodejs ，由於個人項目自己就是node項目，因此直接裝gulp就好。全局安裝gulp，命令以下

npm install -g gulp

     須要安裝的依賴項下面這些，依次安裝就行了：

     

     安裝好全部插件都會放到node_modules目錄下。接下來咱們準備壓縮處理js

　　在項目的本目錄下新建gulpfile.js文件，並添加如下代碼：

var gulp = require('gulp'),
    cleanCSS = require('gulp-clean-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    jshint=require('gulp-jshint');

//語法檢查
gulp.task('jshint', function () {
    return gulp.src('client/assets/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

//壓縮,合併 js
gulp.task('minifyjs', function() {
    return gulp.src([
        'client/assets/js/angular-route.js',
        'client/assets/js/angular-animate.js',
        'client/assets/js/angular-cookies.js',
        'client/assets/js/angular-touch.js',
        'client/assets/js/ngStorage.js',
        'client/assets/js/angular-ui-bootstrap.js',
        'client/assets/js/angularui.js',
        'client/assets/js/toaster/toaster.js',
        'client/assets/js/iit/loading.js',
        'client/assets/js/iit/router.js',
        'client/assets/js/moment.js',
        'client/assets/js/mbdatepicker.js',
        'client/assets/js/jquery.js',
        'client/assets/js/jquery-cookies.js',
        'assets/js/bootstrap/js/bootstrap.min.js',
          ])      //須要操做的文件
        .pipe(concat('main.js'))    //合併全部js到main.js
        .pipe(gulp.dest('client/assets/css/dist'))       //輸出到文件夾
        .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
        .pipe(uglify())    //壓縮
        .pipe(gulp.dest('client/assets/js/dist'));  //輸出
});


//壓縮css
gulp.task('minifycss', function() {
    return gulp.src('client/assets/css/*.css')    //須要操做的文件
        .pipe(rename({suffix: '.min'}))   //rename壓縮後的文件名
        .pipe(cleanCSS({compatibility: 'ie7'}))   //執行壓縮
        .pipe(gulp.dest('client/assets/css/dist'));   //輸出文件夾
});

    //默認命令，在cmd中輸入gulp後，執行的就是這個任務(壓縮js須要在檢查js以後操做)
gulp.task('default',['jshint'],function() {
    gulp.start('minifycss','minifyjs');
});

　　配置以後而後會到根目錄執行cmd 命令 : gulp（gulp命令參考 ： https://github.com/gulpjs/gulp/blob/master/docs/API.md）

  

  而後咱們在指定的目錄下就看到了已經壓縮好的js文件

    

   如今咱們只須要將html中js引用的路徑修改爲壓縮的新路徑便可。

   而後咱們再次訪問頁面的時候就能夠看到引用的js明顯變少了，速度也快了很多

    

    可是這個速度仍是很慢的，影響用戶體驗的，可是咱們發現目前影響速度的主要緣由已經不是js的了，圖片一樣也比較大，影響頁面加載速度。

    gulp 對js，css，img等都是能夠壓縮的。

     須要注意的是js相互之間有依賴，壓縮以後依賴就沒有了，因此的壓縮的時候要注意，有些js是不能壓縮到一塊兒的，不然依賴找不到就報錯了，因此上面的壓縮中angularjs和其餘的幾個我並無一塊兒壓進去。還有就是css壓縮的時候由於命名規範的緣由，壓縮以後有些元素的樣式id會重複，也會致使界面上樣式亂掉的狀況，很不幸我在作的就遇到了，因此這個地方我沒有壓縮css。

    如今圖片是影響加載的緣由，可是由於目前咱們的圖片是放在阿里雲上的，因此的即便咱們想在服務端作壓縮處理也沒辦法，後期遷到咱們本身服務器的時候就能夠考慮在服務端先作一次壓縮，而後再返回。

    

歡迎關注微信公衆平臺：上帝派來改造世界的人