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。

    如今图片是影响加载的缘由，可是由于目前咱们的图片是放在阿里云上的，因此的即便咱们想在服务端作压缩处理也没办法，后期迁到咱们本身服务器的时候就能够考虑在服务端先作一次压缩，而后再返回。

    

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