利用Gulp实现自动化构建代码

利用Gulp实现自动化构建代码

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目

依赖环境安装

1. nodejs
2. npm
3. gulp及其各种插件（用到什么装什么）

例子

以最小化html代码为例
新建一个名字为gulpfile.js的文件输入如下代码

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
    //这里需要安装gulp-htmlmin
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('*.html')//需要压缩并格式化的html页面所在地址
        .pipe(htmlmin(options))//插件种类和配置
        .pipe(gulp.dest('dist/html'));//页面输出地址
});

然后在该文件的目录下运行命令行输入

gulp testHtmlmin

就能在输出目录里看见压缩完后的页面啦！

另附一些gulp的功能，可以自己查api使用，大致和上边差不多。
同时可以用watch来监控，一旦源文件发生改变，则自动更新输出。

• gulp-less ：可以讲less编译成css
• gulp-uglify：使用gulp-uglify压缩javascript文件，减小文件大小
• gulp-imagemin:压缩图片文件（包括PNG、JPEG、GIF和SVG图片）
• gulp-concat:使用gulp-concat合并javascript文件，减少网络请求
• gulp-clean-css:压缩css文件，减小文件大小，并给引用url添加版本号避免缓存
• gulp-autoprefixer:使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】

最后来一句！！很好用有木有！！