gulp压缩静态资源

[需求分析]

• 我有JS/Css/html等的压缩需求，gulp能满足
• gulp是构建自动化的工具，对业务的处理,依托第三方插件来完成
• 官方导读 http://www.gulpjs.com.cn/docs...

[前提]

• node.js运行环境安装时并配置了npm
• npm是node.js的包管理工具，npm install 就能下载相应模块
• 类似于php的laravel框架的composer require,也是下载依赖的好手

[步骤]

1. gulp下载
2. gulpfile.js配置
3. gulp <task> <othertask>调用执行

[实践]

var gulp =  require('gulp'),            //require的是node_modules中已下载的模块,直接使用模块名
    cssmin = require('gulp-cssmin'),    //譬如你要处理css压缩，那么你得确保已经npm install gulp-cssmin.这样才能require
    jsmin = require('gulp-uglify');

/*gulp分配任务给指定的插件，由该插件输入输出式处理*/
//Css压缩
gulp.task('cssmin',function () {        //cssmin是gulp调用执行时的任务名,随意
    /*白话文:把什么样的文件，输出给哪个插件处理，结果再输出到哪里*/
    gulp.src('./public/mobile/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./release/css'));
});

//JS压缩
gulp.task('jsmin',function () {
    gulp.src('./public/mobile/js/*.js')
        .pipe(jsmin())
        .pipe(gulp.dest('./release/js'));
});

[调用]

[gulp常用插件整理]

gulp-less         编译LESS文件
gulp-autoprefixer 添加CSS私有前缀
gulp-cssmin       压缩CSS
gulp-rname        重命名
gulp-imagemin     图片压缩
gulp-uglify       压缩JS
gulp-concat       合并
gulp-htmlmin      压缩HTML

插件宝库在此
https://gulpjs.com/plugins/