gulp html 模块化,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'));

});