JavaScript打包工具之Gulp

gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网

$ node -v
$ npm -v

$ npm install gulp -g

$ gulp -v

• gulp：gulp主组件
• del：文件删除
• gulp-htmlmin：html压缩组件
• gulp-remove-html：标签清除
• gulp-remove-empty-lines：清除空白行
• gulp-sass：sass编译
• gulp-less：less编译
• gulp-clean-css：压缩css文件
• gulp-jshint：js语法检查
• gulp-uglify：js文件压缩
• gulp-imagemin：图片压缩
• gulp-concat：多个文件合并为一个
• gulp-replace：文件名替换
• gulp-rename：文件重命名
• gulp-rev：对文件名加MD5后缀

$ npm install --save-dev gulp del gulp-htmlmin gulp-remove-html gulp-remove-empty-lines gulp-sass gulp-less gulp-concat gulp-rename gulp-rev gulp-clean-css

THML

Clean

$ npm install --save-dev gulp del

gulp.task("html:clean", function () {
   
    return del(['docs']);
})

$ gulp html:clean

Min

$npm install --save-dev gulp gulp-remove-html gulp-remove-empty-lines gulp-htmlmin

gulp.task("html:min", function () {
   
    return gulp.src("public/**/*.html")
        .pipe(removeHtml())// 清除特定标签
        .pipe(removeEmptyLines({
    removeComments: true }))// 清除空白行
        .pipe(htmlmin({
   
            removeComments: true,// 清除HTML注释
            collapseWhitespace: false,// 压缩HTML
            collapseBooleanAttributes: true,// 省略布尔属性的值 <input checked="true"/> ==> <input />