Node.js第三方模块 Gulp --学习

一、第三方模块 Gulp

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

二、Gulp能做什么

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

三、Gulp使用

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

四、Gulp中提供的方法

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

const gulp = require('gulp');
  // 使用gulp.task()方法建立任务
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

五、部分Gulp插件

gulp-htmlmin ：html文件压缩
gulp-csso ：压缩css
gulp-babel ：JavaScript语法转化
gulp-less: less语法转化
gulp-uglify ：压缩混淆JavaScript
gulp-file-include 公共文件包含
browsersync 浏览器实时同步
更多具有参考.npmjs.com，这里只是学会如何操作gulp插件，网页里有更多更丰富的插件。

（1）gulp-htmlmin ：html文件压缩，gulp-file-include 公共文件包含
首先命令运行

  npm install  gulp-htmlmin
  npm install gulp-file-include

编辑代码

在html文件中，将公共代码放在一个common.html上保存。
需要引用的html在body内加

@@include('./common/header.html')

 const htmlmin = require('gulp-htmlmin');

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

（2）gulp-csso ：压缩css，gulp-less: less语法转化
首先命令运行

   npm install gulp-csso
   npm install gulp-less

编辑代码

const less = require('gulp-less');
const csso = require('gulp-csso');

// css任务
//  1.less语法转换
 //2.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'))
 });

（3）gulp-babel ：JavaScript语法转化，gulp-uglify ：压缩混淆JavaScript
首先命令运行

  npm install --save-dev gulp-babel @babel/core @babel/preset-env
  npm install --save-dev gulp-uglify

编辑代码

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