Gulp gulp学习使用
程序员文章站
2024-03-24 17:50:04
...
gulpfile.js：
// 引入本地安装的gulp
var gulp = require('gulp');
var less = require('gulp-less'); // 引入less插件 (npm install gulp-less 安装该gulp插件)
var cssmin = require('gulp-cssmin'); // 引入gulp-cssmin插件 (npm 安装)
var imagemin = require('gulp-imagemin'); // 压缩图片插件
var uglify = require('gulp-uglify'); // 压缩("丑化")JS文件的插件
var concat = require('gulp-concat'); // 合并所有JS/CSS文件。 并不会修改html中引入的资源路径
var htmlmin = require('gulp-htmlmin'); // 压缩html文件。
var autoprefixer = require('gulp-autoprefixer'); // 添加浏览器CSS私有前缀。 "-webkit-"
var rev = require('gulp-rev'); // 为CSS/JS文件添加版本号(MD5加密)(为了不使用浏览器缓存旧的CSS/JS文件) 结合rev-collector插件使用
var revCollector = require('gulp-rev-collector'); // 结合rev插件使用。替换html中引入的CSS/JS文件为添加版本号后的资源文件名。
var useref = require('gulp-useref'); // 合并JS/CSS文件。 合并html中的 <!--build-->标签包裹的资源文件,同时会修改html中资源的引入路径。
var gulpif = require('gulp-if'); // 判断。
var rename = require('gulp-rename'); // 重命名。
// 返回值gulp是一个对象,借助此对象可以实现任务清单定制
// 通过一系列方法实现
// 定义任务
gulp.task('myTask',function() {
console.log('myTask');
// 执行任务: cmd---cd gulpfile.js所在目录(一般在项目根目录下创建gulpfile.js)---gulp myTask 然后就会执行该回调函数。(需要全局安装gulp)
});
// 定义任务 less预处理所有的less文件,编译成CSS文件
gulp.task('less',function() {
// 通过gulp.src来指定less文件位置
return gulp.src('./public/less/*.less') // 根据项目资源的具体位置
.pipe(less()) // 借助于gulp-less插件实现less转css的操作。
.pipe(cssmin()) // 通过gulp-cssmin插件压缩。
.pipe(autoprefixer()) // 添加浏览器CSS私有前缀。 "-webkit-"
.pipe(rev()) // 添加CSS/JS文件版本号,避免浏览器使用缓存的旧的文件。
.pipe(gulp.dest('./release/public/css')) // 通过gulp.dest()进行存储。 没有css文件会新建。
.pipe(rev.manifest()) // 会生成一个rev-manifest.json文件,记录原生CSS/JS文件和加版本号后的文件对应关系。
.pipe(rename('css-manifest.json')) // 重命名 将默认的rev-manifest.json文件名改成css-manifest.json (防止和其他(JS)manifest.json文件名相同而造成文件覆盖)
.pipe(gulp.dest(./release/rev)); // rev-manifest.json的保存路径。
});
// 执行任务：cmd---cd gulpfile.js所在目录---gulp less 执行定义的less任务。(需要全局安装gulp)
// 图片处理(压缩图片)
gulp.task('image',function() {
return gulp.src('./public/images/*') // 一个"*"直接子级文件 两个"**"会递归目录下所有文件
.pipe(imagemin()) // 通过gulp-imagemin插件压缩图片。
.pipe(gulp.dest('./release/public/images'));
});
// 压缩JS
gulp.task('js',function() {
return gulp.src('./public/scripts/*.js')
.pipe(concat('all.js')) // 合并成一个"all.js"文件
.pipe(uglify()) // 压缩JS文件。
.pipe(gulp.dest('./release/public/scripts'));
});
// 压缩HTML文件
gulp.task('html',function() {
return gulp.src(['./index.html', './views/*.html'],{base:"./"}) // []数组可以传多个目录文件 {base:"./"}表示保存时"./"目录保持不变(否则所有的.html文件都会保存在相同的目录下)。
.pipe(htmlmin({collapseWhitespace:true, removeComments:true, minifyJS:true})) // 压缩HTML文件 (参数查看API文档) removeComments:删除注释
.pipe(gulp.dest('./release'));
});
// 资源路径替换 将HTML文件中引入的CSS/JS文件替换成加版本号后的文件 (结合gulp-rev插件使用)
gulp.task('revCollector',function() {
return gulp.src(['./release/rev/*.json','./release/**/*.html'],{base:"./release"}) // .json是gulp-dev插件生成的dev-manifest.json文件 .html是要替换的html文件。 **/表示会递归所有层级的目录
.pipe(revCollector()) // 替换成加版本号后的文件名 (结合gulp-rev插件使用)
.pipe(gulp.dest('./release'));
});
// 合并JS/CSS文件。 合并html中的 <!--build-->标签包裹的资源文件,同时会修改html中资源的引入路径。
gulp.task('useref',function() {
return gulp.src('./index.html')
.pipe(useref()) // 合并html中的 <!--build-->标签包裹的资源文件
.pipe(gulpif('*.js',uglify())) // 如果(合并的)是JS文件,那么就进行uglify(压缩"丑化")操作。
.pipe(gulp.dest('./release'));
});
// 默认任务
gulp.task('default',function() {
console.log('默认'); // cmd---cd gulpfile.js所在目录---gulp 执行默认任务。(需要全局安装gulp)
});
// 依赖其他任务
gulp.task('myTask', ['task1','task2'], function() { // []表示依赖的其他任务
console.log('task1,task2任务都会被异步执行'); // 因为是异步调用依赖任务,因此依赖的执行时间和顺序不确定。(解决方法: 被依赖任务的回调函数中加上return)
});
index.html（gulp-useref插件合并html中指定的CSS/JS资源文件）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- build:js ./angular.min.js --> <!-- gulp-useref插件合并build标签包裹的资源文件。angular.min.js是合并后的文件名 -->
<script src='./angular.js'></script>
<script src='./angular-route.js'></script>
<!-- endbuild -->
<!-- build:remove --> <!-- gulp-useref插件 删除build标签包裹的内容 -->
<script src='./xxx.js'></script>
<!-- endbuild -->
</body>
</html>