gulp html压缩 tomcat,gulp使用入门

API 文档

所有压缩插件，可参考gulp官方或者node官方

1.安装node和gulp：

node安装暂不介绍。

gulp安装：本地安装： npm install gulp / npm install gulp --save-dev

ps：如果只是本地安装，后面在使用gulp命令的时候会报错，所以还需要全局安装npm install gulp -g

ps：另外这里介绍下 npm install gulp 和 npm install gulp --save-dev的区别:

添加 package到： dependencies(生产环境)

npm install --save 或

npm install 添加 package到： devDependencies(开发环境)

npm install --save-dev

dependencies主要是放一些你程序跑起来所必须的模块

devDependencies主要放一些工具类的模块，你打包之后就不需要了的，比如ES6转ES5，scss转css，文件压缩等等。

如下图，我们要在gulp目录下，本地安装gulp，安装好之后里面就会有一个node_modules文件夹(里面放的我们安装的gulp，后面的插件也都是在这里，不详细介绍)

image.png

2.新建：assets放源文件，dist放压缩后的文件，以及一个 gulpfile.js 文件：

image.png

ps：package.json文件是怎么来的？有什么用？可以查下node相关知识，下面简单介绍下：

使用node init即可初始化文件夹，创建package.json文件，这里面记录了你安装的所有包。如果你的代码要给另一个人使用，而node_modules文件夹又太大，不方便上传到代码库，那个人也不可能把你安装的所有依赖包一个一个再安装一遍，这个时候如果有package.json文件，直接使用npm install，就可以把要下载的包全部下载下来了。

gulp基础语法,使用压缩js来介绍，比如我们下面把assets下的js压缩到dist下

// 获取 gulp

var gulp = require('gulp');

//require() 是 node (CommonJS)中获取模块的语法。

//在 gulp 中你只需要理解 require() 可以获取模块。

// 获取 uglify 模块(用于压缩 JS)

var uglify = require('gulp-uglify');

// 压缩 js 文件

// 在命令行使用 gulp script 启动此任务

gulp.task('script', function() {

// 1. 找到文件

gulp.src('assets/*.js')

// 2. 压缩文件

.pipe(uglify())

// 3. 另存压缩后的文件

.pipe(gulp.dest('dist/js'))

})

// gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容。

// gulp.src(path) - 选择文件，传入参数是文件路径。

// gulp.dest(path) - 输出文件

// gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列

3.可以看到上面的代码里面依赖gulp-uglify这个模块，下面我们用node安装gulp-uglify模块，命令：npm install gulp-uglify --save-dev

然后跳转至 gulpfile.js 所在目录，执行 gulp script 命令，js压缩就完成了

4.优化，自动更新。当 js 里面的js更新后，自动执行 gulp script

可以使用 gulp.watch(src, fn) 检测指定目录下文件的修改后执行任务。

但是没有命令可以运行 gulp.watch()，需要将 gulp.watch() 包含在一个任务中。

接着在命令行输入 gulp auto，自动监听 js/*.js 文件的修改，并压缩js。我们在 gulpfile.js 后面添加如下代码：

// 在命令行使用 gulp auto 启动此任务

gulp.task('auto', function () {

// 监听文件修改，当文件被修改则执行 script 任务

gulp.watch('assets/*.js', ['script'])

})

5.最后，使用 gulp.task('default', fn) 定义默认任务(通俗点说，就是把里面的两个任务合并起来，这样就不用执行多次了)

此时你可以在命令行直接输入 gulp +回车，运行 script 和 auto 任务。我们在 gulpfile.js 后面添加如下代码：

// 使用 gulp.task('default') 定义默认任务

// 在命令行使用 gulp 启动 script 任务和 auto 任务

gulp.task('default', ['script', 'auto'])

PS.若被压缩的js有的在子目录，有的在二级子目录，则可使用**，比如下面代码，可以找到 assets/js 文件夹下的所有js文件：

gulp.src('assets/js/**/*.js')

下面贴上一个基础的gulpfile.js，压缩html，压缩js，压缩css，压缩img，scss转css等等

相关依赖包：

image.png

var gulp = require('gulp'),

uglify = require('gulp-uglify'), //压缩js

sass = require('gulp-sass'),//scss转css

minifycss = require('gulp-minify-css'),//压缩css//gulp-minify-css已经被废弃，请使用gulp-clean-css，用法一致。

imagemin = require('gulp-imagemin'),//压缩image

htmlmin = require('gulp-htmlmin'),//压缩html

concat = require('gulp-concat'),//合并文件

rename = require('gulp-rename'),//重命名

del = require('del');//删除，一般执行压缩前，先删除文件夹里的内容

// 执行压缩前，清空文件夹

gulp.task('clean', function() {

return del(['dist/html','dist/css','dist/js','dist/img'])//异步操作，只有return后再执行其他动作，才不会顺序混乱。

//下面可以不用加return，因为没有顺序优先级

});

gulp.task('jsmin', function() {

var options = {

dirname: "aa",//aa文件夹下，一般不设置

basename: "bb",//文件名，一般不设置

prefix: "cc-",//前缀，一般不设置

suffix: "-dd",//后缀，一般只用设置这个属性，比如：.min

extname: ".js"//文件类型，一般不设置

}// 这个生成的结果：aa文件夹下有个cc-bb-dd.js

gulp.src('assets/js/**/*.js')

.pipe(concat('main.js'))//合并所有js到main.js

.pipe(rename(options))//rename压缩后的文件名

.pipe(uglify())//压缩

.pipe(gulp.dest('dist/js'));//输出

})

gulp.task('cssmin', function(){

gulp.src('assets/scss/**/*.scss')

.pipe(sass())//转成css

.pipe(minifycss())//压缩css

.pipe(gulp.dest('dist/css'))

});

gulp.task('imagemin', function(){

gulp.src('assets/img/**/*.{png,jpg,gif}')

.pipe(imagemin())

.pipe(gulp.dest('dist/img'))

});

gulp.task('htmlmin', function () {

var options = {

removeComments: true,//清除HTML注释

collapseWhitespace: true,//压缩HTML

collapseBooleanAttributes: true,//省略布尔属性的值 ==>

removeEmptyAttributes: true,//删除所有空格作属性值 ==>

removeScriptTypeAttributes: true,//删除