gulp4的基本使用

按着官网安装步骤

重点gulpfile.js内容

const { src, dest, parallel, series, watch } = require('gulp');
const minifyCSS = require('gulp-csso') // 压缩css
const minifyHtml = require('gulp-minify-html') // 压缩html
const uglify = require('gulp-uglify'); //js压缩
const sass = require('gulp-sass')  // sass 转 css
const clean = require('gulp-clean') // 清空
const connect = require('gulp-connect') // 浏览器自动刷新
const opn = require('open')  //自动打开浏览器
const label = require('gulp-babel') // es6转es5
const spritesmith = require('gulp.spritesmith') //img 合并


function html() {
  return src('app/views/**/*.html')  
	.pipe(minifyHtml()) 
	.pipe(dest('dist/views'))
	.pipe(connect.reload()) 
}

function css() {
  return src('app/scss/**/*.scss')
	.pipe(sass())
	.pipe(minifyCSS())
	.pipe(dest('dist/css'))
	.pipe(connect.reload())
}

function js() {
  return src('app/js/**/*.js', { sourcemaps: true })
	// .pipe(concat('app.min.js'))
	.pipe(label())
    .pipe(uglify())
	.pipe(dest('dist/js', { sourcemaps: true }))
	.pipe(connect.reload())
}
function imgZip(){
	return src('app/img/**/*.{png,jpg,jpeg,ico,gif,svg}', { sourcemaps: true })
	.pipe(spritesmith({
		imgName: 'sprite.png',//保存合并后图片的地址
		cssName: 'css/sprite.css',//保存合并后对于css样式的地址
		padding:5,//合并时两个图片的间距
		algorithm: 'binary-tree',//注释1
		cssTemplate: function (data) {
			var arr=[];
			data.sprites.forEach(function (sprite) {
				arr.push(".icon-"+sprite.name+
				"{" +
				"background-image: url('"+sprite.escaped_image+"');"+
				"background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"+
				"width:"+sprite.px.width+";"+
				"height:"+sprite.px.height+";"+
				"}\n");
			});
			return arr.join("");
		}

	}))
	
	.pipe(dest('dist/img'));
}

function cleanContent() {
	return src('dist/*', {read: false})
   		 //删除dist/*下的所有文件
		.pipe(clean())
		.pipe(connect.reload())
}

function watchContent() {

	watch('app/scss/**/*.scss').on('change', function(path, stats) {
		console.log(`CSS File ${path} was changed `);

		css()
	}); 

	watch('app/js/**/*.js').on('change', function(path, stats) {
		console.log(`JS File ${path} was changed`);
		js()
		
	}); 
	watch('app/views/**').on('change', function(path, stats) {

		console.log(`HTML File ${path} was changed`);
		html()
	}); 
}

function testServer() {
	connect.server({
        root: './app/',  // 监控文件夹
        livereload: true,// 自动刷新
        port: 2333
	})
	var homepage = 'http://localhost:2333/views'
		opn(homepage);
}

// exports.js = js;
// exports.css = css;
// exports.html = html;

exports.default = series(cleanContent,parallel(watchContent, html, css, js, imgZip, testServer));

 关于label(),将es6转为es5的方法，gulp-label版本问题

1.之前直接安装gulp-label，安装的版本为8.0版本，运行出错，上网查询后，label版本需要改为7.0，命令如下

npm install --save-dev gulp-label@7.0.1

2.使用label()转换，还需配置名为".babelrc"

安装如下模块

  npm install --save-dev babel-preset-es2015

配置文件里的内容

{
    "presets": ["es2015"]
}

配置文件位置如图