Node第三方模块 Gulp

第三方模块 Gulp

Gulp是什么？

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

JavaScript 和 Gulpfile
Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件，或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。虽然gulp 提供了一些实用工具来简化文件系统和命令行的操作，但是你所编写的其他代码都是纯 JavaScript 代码。

Gulp能做什么

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

Gulp使用

使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行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 浏览器实时同步

// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
	console.log('我们人生中的第一个gulp任务执行了');
	// 1.使用gulp.src获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));
});

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

// 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'))
});

// js任务
// 1.es6代码转换
// 2.代码压缩
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'))
});

// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

当任务名为：default时,可以只写gulp
在这里插入图片描述

在这里插入图片描述

注：gulp.pipe:
首先，gulp的源码里没有任何一部分是定义pipe的。

gulp的pipe方法是来自nodejs stream API的。
gulp本身是由一系列vinyl模块组织起来的。

pipe方法到底是什么呢？

pipe跟他字面意思一样只是一个管道

例如我有一堆文件

var s = gulp.src(["fileA","fileB","fileC"])

src方法实际上是’vinyl-fs’模块的方法,选择一系列文件并创建可读流（readableStream）。

返回的是由从这些文件而来的流（stream）

既然是Stream，自然少不了最常用的pipe的方法。

s.pipe(fn)

pipe方法传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)。

注意的是这个函数只是一个包装，并不是会直接操作文件的。

管道与Stream

也就是说pipe本身只是定义了管道的组织情况，管道本身的具体结构（Stream对象），是需要开发者自己去设计的。

pipe方法只负责返回这个管道结构（Stream对象）

想要窥探管道里的内容，就要创建一个Stream对象，在Stream对象接收结果的方法里把流里的内容log出来即可

Stream与File

注意的是gulp里的流的file必须是vinyl对象


var File = require("gulp-utils").File
//或者
var File = require("vinyl")
 
var myf = new File()
myf.contents = new Buffer("haha")

来源：CSDN

作者：司~夏

链接：https://blog.csdn.net/qq_44721831/article/details/104060710

标签

gulp

前端开发

javascript

node