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。

    现在图片是影响加载的原因，但是因为目前我们的图片是放在阿里云上的，所以的即使我们想在服务端做压缩处理也没办法，后期迁到我们自己服务器的时候就可以考虑在服务端先做一次压缩，然后再返回。

    

欢迎关注微信公众平台：上帝派来改造世界的人