node.js中模块化开发（Gulp4）

最新推荐文章于 2023-03-18 21:26:13 发布

_XinXinM_

最新推荐文章于 2023-03-18 21:26:13 发布

阅读量279

点赞数 1

本文链接：https://blog.csdn.net/binbinhxx/article/details/112495735

版权

Gulp中提供的方法

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

**gulp.src()**是用来获取文件的，想要处理哪些文件通过这个方法就可以获取到。
**gulp.dest)**是用来输出文件，获取到的文件都是在内存，然后再内存当中处理这些文件，处理完之后要输出到硬盘某个目录上面，我们当前就是dist目录，要把处理好的文件输出出来也就需要使用gulp.dest()这样的方法。gulp允许我们去建立任务，刚才我们说的src、dest都是做任务的时候去使用方法。
gulp.task()用来建立任务。
gulp.watch()监控任务。可以监控我文件的变化。文件发生变化的时候我们需要做哪些事情

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

pipe本身有管道的意思

// 引用gulp模块
const gulp = require(‘gulp’);
// 建立任务gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task(‘first’,(done)=>{
// 回调函数，当我们执行gulp.task任务的时候回调函数就可以被执行
console.log(‘我的人生中的第一个gulp任务执行了’);
// 1.使用gulp.src获取要处理的文件
gulp.src(’./src/css/base.css’)
// 直接把文件输出到另外的目录下去
// 不能直接使用.dest() 因为dest也是对文件处理的方式
.pipe(gulp.dest(‘dist/css’));
done();
});

在这里插入图片描述 Using gulpfile告诉我们使用的是gulpfile.js这个文件；
Starting first 告诉我们开始执行first这个任务
Finished "first" after 结束任务
在gulpfile.js文件当中首先要同require方法吧gulp引用进来

 const gulp = require('gulp');

可以使用gulp里面的task方法来创建任务

// 建立任务gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',(done)=>{
    // 回调函数，当我们执行gulp.task任务的时候回调函数就可以被执行
    console.log('我的人生中的第一个gulp任务执行了');
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 直接把文件输出到另外的目录下去
    // 不能直接使用.dest() 因为dest也是对文件处理的方式
        .pipe(gulp.dest('dist/css'));
        done();
});

创建任务的第一个参数是任务名称，因为我们可以创建多个任务。
区分多个任务的根据就是任务名称。
第二个任务是回调函数,当我们执行任务的时候，回调函数会被自动执行。
上面代码回调函数做的内容是写了一个回调函数用来输出，接下来用gulp.src去取要处理的文件，接着用pipe方法处理文件，在pipe方法里写的就是处理文件的代码gulp.dest('');就是直接把文件输入到dist目录下的css文件中。

2.Gulp插件

gulp-htmlmin：html文件压缩
gulp-csso：压缩css
gulp-babel：JavaScript语法转化
gulp-less：less 语法转化
gulp-uglify：压缩JavaScript
gulp-file-include ：公共文件包含
browsersync：浏览器实时同步

使用gulp插件方式
1.npm命令下载插件
2.在gulpfilejs中引入插件
3.调用插件

// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require("gulp-htmlmin");
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',(done)=>{
    // 回调函数，当我们执行gulp.task任务的时候回调函数就可以被执行
    console.log('我的人生中的第一个gulp任务执行了');
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 直接把文件输出到另外的目录下去
    // 不能直接使用.dest() 因为dest也是对文件处理的方式
        .pipe(gulp.dest('dist/css'));
        done();
}); 
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
// 把公共代码放到到一个单独的公共文件当中
// 当修改公共代码的时候只需要修改单独文件就可以了
//Gulp插件 1.下载 2.引用 3.调用
gulp.task('htmlmin',(done) =>{
    gulp.src('./src/*.html')
        // htmlmin是上面引入gulp-html返回的值
        // 压缩html文件中的代码
        // 调用htmlmin里面传递的参数collapseWhitespace: true
        // collapse是折叠的意思Whitespace是空格
        // collapseWhitespace：就是问要不要在压缩代码的时候压缩空格
        // collapseWhitespace: true代表压缩 false表示不压缩
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
        done()
})

gulp-htmlmin：html文件压缩
在这里插入图片描述
html文件压缩成功

在这里插入图片描述
- gulp-csso：压缩css
gulp-less：less 语法转化

// 引用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');
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',(done)=>{
    // 回调函数，当我们执行gulp.task任务的时候回调函数就可以被执行
    console.log('我的人生中的第一个gulp任务执行了');
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 直接把文件输出到另外的目录下去
    // 不能直接使用.dest() 因为dest也是对文件处理的方式
        .pipe(gulp.dest('dist/css'));
        done();
}); 
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
// 把公共代码放到到一个单独的公共文件当中
// 当修改公共代码的时候只需要修改单独文件就可以了
//Gulp插件 1.下载 2.引用 3.调用
gulp.task('htmlmin',(done) =>{
    gulp.src('./src/*.html')

        pipe(fileinclude())
        // htmlmin是上面引入gulp-html返回的值
        // 压缩html文件中的代码
        // 调用htmlmin里面传递的参数collapseWhitespace: true
        // collapse是折叠的意思Whitespace是空格
        // collapseWhitespace：就是问要不要在压缩代码的时候压缩空格
        // collapseWhitespace: true代表压缩 false表示不压缩
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
        done()
})
// gulp中任务的执行是有顺序的
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task("cssmin",(done) => {
    // 选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理的结果进输出
        .pipe(gulp.dest('dist/css'))
        done()
});

在这里插入图片描述

gulp-babel：JavaScript语法转化
gulp-uglify：压缩JavaScript
.es6代码转换+.js代码压缩

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	@@include('./common/header.html')
	<!-- 文章列表开始 -->
	<ul class="list w1100">
		<li class="fl">
			<a href="article.html" class="thumbnail">
				<img src="images/1.jpg">
			</a>
			<div class="content">
				<a class="article-title" href="article.html">阿里巴巴旗下的1688－VR市场 打造批发新体验</a>
				<div class="article-info">
					<span class="author">子霆</span>
					<span>2020-09-10</span>
				</div>
				<div class="brief">
					前言 “我们相信互联网的世界和实体的商业世界是一个世界。数字、数据化、技术，使得这两个世界走在一起，让这两个世界能够发生很美好的变化，创造更多的客户价值和商业价值。”—...
				</div>
			</div>
		</li>
		<li class="fr">
			<a href="article.html" class="thumbnail">
				<img src="images/2.png">
			</a>
			<div class="content">
				<a class="article-title" href="article.html">
				天猫精灵超级发布会创意设计                             打造批发新体验</a>
				<div class="article-info">
					<span class="author">he chunli</span>
					<span>2020-09-10</span>
				</div>
				<div class="brief">
					天猫精灵品牌经历了一年的成长，在2018年中营销活动中，以527超级发布会作为品牌宣传的主战场，以618年中大促作为品牌销售的承接，UED团队从品牌价值诉求出发，完成品牌精神、情感、表...
				</div>
			</div>
		</li>
		<li class="fl">
			<a href="article.html" class="thumbnail">
				<img src="images/3.jpg">
			</a>
			<div class="content">
				<a class="article-title" href="article.html">UCAN——复杂信息传递的品牌设计方法探索</a>
				<div class="article-info">
					<span class="author">芭月</span>
					<span>2020-09-10</span>
				</div>
				<div class="brief">
					前言 我们平时在做设计的时候会遇到多种多样的问题，如何把复杂的需求合理的梳理一直是困扰设计师的问题之一，在这篇文章里我们希望通过ucan品牌诞生的过程梳理，带给各位一个解决问...
				</div>
			</div>
		</li>
		<li class="fr">
			<a href="article.html" class="thumbnail">
				<img src="images/4.jpg">
			</a>
			<div class="content">
				<a class="article-title" href="article.html">
					触碰智能图像时代-营销设计中的智能化初探
				</a>
				<div class="article-info">
					<span class="author">李郭</span>
					<span>2020-09-10</span>
				</div>
				<div class="brief">
					近年来，设计圈有两大趋势不容忽视，一是人工智能、神经网络、深度学习无疑是时下最热门的科技名词，“人工智能设计”这个词语在设计圈也深受追捧，我们也看到越来越多的初创公司...
				</div>
			</div>
		</li>
		<li class="fl">
			<a href="article.html" class="thumbnail">
				<img src="images/5.png">
			</a>
			<div class="content">
				<a class="article-title" href="article.html">SCARP-视觉设计师应该拥有的体验思维——收藏夹升级阶段性思考心得</a>
				<div class="article-info">
					<span class="author">吴晗菲</span>
					<span>2020-09-10</span>
				</div>
				<div class="brief">
					面对纯工具型产品时，作为一名视觉设计师很容易陷入两种境地——脱离产品、用户本身做天马行空的视觉设计进入一种自我陶醉的状态，从而产出过于形式化不符合工具类产品特征的设计...
				</div>
			</div>
		</li>
		<li class="fr">
			<a href="article.html" class="thumbnail">
				<img src="images/6.png">
			</a>
			<div class="content">
				<a class="article-title" href="article.html">B类电商平台立体化品牌建设 – 大企业采购品牌升级一期小结</a>
				<div class="article-info">
					<span class="author">悦陶</span>
					<span>2020-09-10</span>
				</div>
				<div class="brief">
					关于品牌设计Brand Design 首选我们需要了解什么是品牌？ 现代营销学之父菲利普.科特勒在《市场营销学》中的定义，品牌是销售者向购买者长期提供的一组特定的特点、利益和服务，是一个...
				</div>
			</div>
		</li>
	</ul>
	<!-- 文章列表结束 -->

	<!-- 分页开始 -->
	<div class="page w1100">
		<a href="#">上一页</a>
		<a href="#" class="active">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">下一页</a>
	</div>
	<!-- 分页结束 -->
</body>
</html>

复制文件夹

// 引用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');
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',(done)=>{
    // 回调函数，当我们执行gulp.task任务的时候回调函数就可以被执行
    console.log('我的人生中的第一个gulp任务执行了');
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 直接把文件输出到另外的目录下去
    // 不能直接使用.dest() 因为dest也是对文件处理的方式
        .pipe(gulp.dest('dist/css'));
        done();
}); 
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
// 把公共代码放到到一个单独的公共文件当中
// 当修改公共代码的时候只需要修改单独文件就可以了
//Gulp插件 1.下载 2.引用 3.调用
gulp.task('htmlmin',(done) =>{
    gulp.src('./src/*.html')

        .pipe(fileinclude())
        // htmlmin是上面引入gulp-html返回的值
        // 压缩html文件中的代码
        // 调用htmlmin里面传递的参数collapseWhitespace: true
        // collapse是折叠的意思Whitespace是空格
        // collapseWhitespace：就是问要不要在压缩代码的时候压缩空格
        // collapseWhitespace: true代表压缩 false表示不压缩
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
        done()
})
// gulp中任务的执行是有顺序的
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task("cssmin",(done) => {
    // 选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理的结果进输出
        .pipe(gulp.dest('dist/css'))
        done()
});
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task ('jsmin',(done) => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            // 他可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets:['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        done()
});
// 复制文件夹
gulp.task('copy',(done) =>{
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
        done()
})

在这里插入图片描述

构建任务

// 引用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');
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first',(done)=>{
    // 回调函数，当我们执行gulp.task任务的时候回调函数就可以被执行
    console.log('我的人生中的第一个gulp任务执行了');
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
    // 直接把文件输出到另外的目录下去
    // 不能直接使用.dest() 因为dest也是对文件处理的方式
        .pipe(gulp.dest('dist/css'));
        done();
}); 
// html任务
// 1.html文件中代码的压缩操作
// 2.抽取html文件中的公共代码
// 把公共代码放到到一个单独的公共文件当中
// 当修改公共代码的时候只需要修改单独文件就可以了
//Gulp插件 1.下载 2.引用 3.调用
gulp.task('htmlmin',(done) =>{
    gulp.src('./src/*.html')

        .pipe(fileinclude())
        // htmlmin是上面引入gulp-html返回的值
        // 压缩html文件中的代码
        // 调用htmlmin里面传递的参数collapseWhitespace: true
        // collapse是折叠的意思Whitespace是空格
        // collapseWhitespace：就是问要不要在压缩代码的时候压缩空格
        // collapseWhitespace: true代表压缩 false表示不压缩
        .pipe(htmlmin({ collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
        done()
})
// gulp中任务的执行是有顺序的
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task("cssmin",(done) => {
    // 选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less','./src/css/*.css'])
        // 将less语法转换为css语法
        .pipe(less())
        // 将css代码进行压缩
        .pipe(csso())
        // 将处理的结果进输出
        .pipe(gulp.dest('dist/css'))
        done()
});
// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task ('jsmin',(done) => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            // 他可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets:['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        done()
});
// 复制文件夹
gulp.task('copy',(done) =>{
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
        done()
})

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

在这里插入图片描述