gulp3学习

gulpfile.js

// Gulp中提供的方法（这里是gulp3的方法，升级成4+后不能传递一个依赖任务列表。）
// gulp.src()   获取任务要处理的文件
// gulp.dest()  输出文件
// gulp.task()  建立gulp任务
// gulp.watch() 监控文件的变化

// gulp-htmlmin: html文件压缩
// gulp-csso: 压缩css
// gulp-babel: JavaScript语法转化
// gulp-uglify: 压缩混淆JavaScript代码
// gulp-file-include: 公共文件包含(通过在文件中使用@@include()函数引入其他文件)
// browsersync: 浏览器实时同步


 // npm install gulp --save-dev
const gulp = require('gulp')
 // npm install gulp-htmlmin --save-dev
const htmlmin = require('gulp-htmlmin')
// npm install gulp-file-include --save-dev
const fileinclude = require('gulp-file-include')
// npm install gulp-less --save-dev
const less = require('gulp-less')
// npm install gulp-csso --save-dev
const csso = require('gulp-csso')
// npm install gulp-babel @babel/core @babel/preset-env --save-dev
const babel = require('gulp-babel')
// npm install gulp-uglify --save-dev
const uglify = require('gulp-uglify')


// 建立第一个任务first
gulp.task('first', () => {
	console.log("我人生中的第一个gulp任务执行了！");
	// 获取要处理的文件
	gulp.src('./src/css/base.css')
	// 将处理后的文件输出到dist/css（这里没有处理） 【pipr: 管道】
	.pipe(gulp.dest('./dist/css'))
})



// html任务
// 1. 抽取html文件中的公共代码
// 2. html文件中代码的压缩操作
gulp.task('htmlmin', () => {
	console.log("开始执行htmlmin任务……");
	gulp.src('./src/*.html')
		.pipe(fileinclude())  
		.pipe(htmlmin({collapseWhitespace: true}))  
		.pipe(gulp.dest('dist'))
})


// css任务
// 1. less语法转化
// 2. css代码压缩
gulp.task('cssmin', () => {
	console.log("开始执行cssmin任务……");
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		.pipe(less()) 
		.pipe(csso()) 
		.pipe(gulp.dest('dist/css'))
})



// javascript任务
// 1. es6代码转化
// 2. js代码压缩混淆
gulp.task('jsmin', () => {
	console.log("开始执行jsmin任务……");
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 他可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码（这个不太懂，gulp不是提前打包？）
			presets: ['@babel/env']
		}))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'))
})



// 复制文件夹
gulp.task('copy', () => {
	console.log("开始执行copy任务……");
	gulp.src('./src/img/*')
		.pipe(gulp.dest('dist/img'))
		
	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
})



// 构建任务
gulp.task('default', ['htmlmin','cssmin','jsmin','copy'], () => {
	console.log("default任务执行完成！");
});

package.json

{
  "name": "gulp_learn",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-file-include": "^2.2.2",
    "gulp-htmlmin": "^5.0.1",
    "gulp-uglify": "^3.0.2"
  },
  "dependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "gulp-babel": "^8.0.0",
    "gulp-csso": "^4.0.1",
    "gulp-less": "^4.0.1"
  }
}