node.js中Gulp模块化使用

GULP 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

常用的gulp插件：

sass 的编译（ gulp-sass）
less 编译 （ gulp-less）
重命名（ gulp-rename）
自动添加 css 前缀（ gulp-autoprefixer）
压缩 css（ gulp-clean-css）
js 代码校验（ gulp-jshint）
合并 js 文件（ gulp-concat）
压缩 js 代码（ gulp-uglify）
压缩图片（ gulp-imagemin）
自动刷新页面（ gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装 livereload 插件）
图片缓存，只有图片替换了才压缩（ gulp-cache）
更改提醒（ gulp-notify）

插件使用

下面介绍gulp中的插件，

gulp-less插件

1、先在本地下载插件

        cnpm install gulp-less --save-dev

2、在入口js文件（gulpfile.js或者index.js）中，写代码（任务代码）

        var g = require("gulp");
        var gxx = require("gulp-xxxx");

        g.task("任务名",function() {
            g.src("目标路径")
             .pipe(插件方法，如test_less())
             .pipe(g.dest("任务完成后的路径"));
        });

gulp-htmlmin插件

安装命令：cnpm install gulp-htmlmin --save-dev

var gulp = require("gulp");
var gulp_htmlmin = require("gulp-htmlmin");

var minjs = require('gulp-uglify');//autoprefixer插件模块

gulp.task("test-htmlmin",function(){
    var options = {
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        removeEmptyAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        minifyJS: true,
        minifyCSS: true
    };
    gulp.src("src/*.html")
        .pipe(gulp_htmlmin(options))
        .pipe(gulp.dest("dist/"))
});

gulp-minify-css插件

安装命令：cnpm install gulp-minify-css --save-dev

var cssmin_minify = require('gulp-minify-css');
gulp.task("test-minify",function(){
    gulp.src("src/css/*.css")
        .pipe(cssmin_minify({
            advanced: false,
            compatibility: 'ie7',
            keepBreaks: false,
            keepSpecialComments: '*'

}))
    .pipe(gulp.dest("dist/css/"))
});

gulp-sass插件

安装命令：npm install –save-dev gulp-sass

var gulp = require('gulp'),
sass = require("gulp-sass");
gulp.task('test-sass', function () {
gulp.src('sass/*.sass')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
});

gulp-uglify插件

安装命令： cnpm install gulp-uglify --save-dev

var minjs = require('gulp-uglify');
gulp.task('jsmin', function () {
    gulp.src(['src/js/address.js','src/js/cart.js','src/js/detail.js','src/js/index.js'])
//多个文件以数组形式传入
    .pipe(minjs())
    .pipe(gulp.dest('dest/js'));
});