Gulp gulp学习使用

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>

猜你喜欢