gulp 压缩 js 和 css 代码

我们在写出来的代码都是非常规范的，改换行的时候就换行，改tab 的时候就有tab，还有这样做是为了后期维护方便，但是这也导致了内存占用量的增大，当把把代码发到线上，如果网速慢一点，可能很久都加载不出来，当然现在解决的办法也有很多，比如CDN 托管，缓存机制等。前端能做的还是以压缩代码为主。

现在压缩代码的工具有很多，比如webpack，但是配置起来要麻烦一些，那我采用的就是gulp来压缩代码

首先要安装依赖

npm install gulp -g    //全局安装
npm install gulp -D   //安装开发以来

这是你的目录中就会多一个node_modules 的文件夹，这个文件夹就是用来存放一些项目依赖的。

在此目录中新建一个 gulpfile.js 的文件，新建一个 js 文件夹，用来存放未压缩的 js 文件，新建一个 css 文件夹，用来存放未压缩的css文件。

在编辑器中打开 gulpfile.js 文件编写代码

var gulp = require('gulp'),     //引入gulp模块
    minifycss = require('gulp-minify-css'),   //引入css压缩模块
    uglify = require('gulp-uglify');  //引入js压缩模块

// 压缩js 代码
gulp.task('script', function() {
    gulp.src('js/*.js')   //选取js文件夹下面的所有js文件
        .pipe(uglify())   //调用js压缩模块
        .pipe(gulp.dest('dist/js'))   //将压缩后的js输出到dist下面的js文件夹中
})

//压缩 css 代码
gulp.task('css', function() {
    gulp.src('css/*.css')   //选取css文件夹下面的所有css文件
        .pipe(minifycss())  //调用css压缩模块
        .pipe(gulp.dest('dist/css'))   //将压缩后的css文件输出到dist下面的css文件夹中
})

将要压缩的js或者css文件放入相应的文件夹中。在命令行执行

//压缩js代码执行
gulp script

//压缩css代码执行
gulp css

如果出现

那么就说明压缩成功了，这时在dist文件夹下就有相应的压缩文件了

关于gulp的应用不仅仅是这么点，更多例子可以查看 gulp中文文档