Nodejs资料之Gulp模块

◆ 模块作用：

基于node平台开发的前端构建工具，将机械化操作编写成任务, 想要执行机械化操作时执行一个命令行命令任务就能自动执行了，提高开发效率。

1. 项目上线，HTML、CSS、JS文件压缩合并
2. 语法转换（es6、less ...）
3. 公共文件抽离
4. 修改文件浏览器自动刷新

◆ 使用步骤：

1. 使用npm install gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件
3. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务.
5. 在命令行工具中执行gulp任务

◆ Gulp中提供的方法：

1. gulp.src()：获取任务要处理的文件
2. gulp.dest()：输出文件
3. gulp.task()：建立gulp任务
4. gulp.watch()：监控文件的变化

◆ Gulp插件：

需使用npm命令下载如下的插件：

1. gulp-htmlmin ：html文件压缩
2. gulp-csso ：压缩css
3. gulp-babel ：JavaScript语法转化
4. gulp-less: less语法转化
5. gulp-uglify ：压缩混淆JavaScript
6. gulp-file-include 公共文件包含
7. browsersync 浏览器实时同步

◆ 使用gulp.task建立任务：

// 参数：任务的名称；任务的回调函数
gulp.task('first', () => {
	console.log('我们人生中的第一个gulp任务执行了');
	// 使用gulp.src获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));
});

◆ 构建任务集合：

gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

◆ html任务：

压缩html文件中代码并抽取公共代码

gulp.task('htmlmin', () => {
	gulp.src('./src/*.html')
		.pipe(fileinclude())
		// 压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
});

◆ css任务：

less语法转换和css代码压缩

gulp.task('cssmin', () => {
	// 选择css目录下的所有less文件以及css文件
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		// 将less语法转换为css语法
		.pipe(less())
		// 将css代码进行压缩
		.pipe(csso())
		// 将处理的结果进行输出
		.pipe(gulp.dest('dist/css'))
});

◆ js任务：

es6代码转换和代码压缩

gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

◆ 复制文件夹：

gulp.task('copy', () => {
	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));
	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
});