Gulp压缩那些事

前提：

       gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

        gulp压缩的一般都是js，css，html，image等文件。使用gulp压缩之后代码会更加安全体积会变小。Gulp插件不同所涉猎的功能也不同。常用的gulp插件

使用gulp的步骤：

      1. 全局安装gulp ----cnpminstall gulp –g

      2. 本地安装gulp ----cnpminstall gulp –save

注：全局安装gulp是为了执行gulp任务，本地安装gulp是为了调用gulp插件的功能。

     3. 本地安装gulp插件，

     cnpm install gulp-rename  ---重命名文件

     cnpm installgulp-uglify    ---压缩js文件

     cnpm insallgulp-imagemin  ---压缩图片

     cnpm installgulp-htmlmin   ---压缩HTML

     cnpm installgulp-minify-css ---压缩css

     4. 新建gulpfile.js文件（重要）

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');
 
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css(s输出文件夹)
});
 
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务

   5.执行gulp任务

    gulp testLess

成果展示：

    

感受：

       实践出真知。