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>