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

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="data: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="data: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="data: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="data: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="data: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="data: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'));

node.js中模块化开发（Gulp4）相关推荐

Node.js模块化开发||Node.js中模块化开发规范
JavaScript开发弊端 a.js b.js JavaScript在使用时存在两大问题,文件依赖和命名冲突. 生活中的模块化开发软件中的模块化开发 app.j user.一个功能就是一个模块,多 ...
【Node学习】—Node.js中模块化开发的规范
[Node学习]-Node.js中模块化开发的规范 Node.js 规定一个JavaScript就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到模块化内部可以使用exports对象进行 ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...
[转]JavaScript/Node.JS 中的 Promises
JavaScript Promises 初体验 Promise 是什么? Promise 对象用来进行延迟(deferred) 和异步(asynchronous) 计算. 一个 Promise 处于 ...
Node.js之模块化
哈喽小伙伴们,最近都在看什么剧啊,感觉一直都处于剧荒状态,一个等了超级久的剧但是没几天就播完了,还没有看爽就没了,现在的剧也是一直处于更新中,非常慢,导致每天都不知道要干点儿啥,毕业设计没搞完但是也不 ...
Vue.js+Node.js全栈开发教程：通过Visual Studio Code开发调试Node应用
目前,有多种开发工具可以支持Node.js应用的开发,比如: jetBrains WebStorm.Eclipse.Visual Studio Code等.这些开发工具原则上是"条条大路通 ...
在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
node/js 漏洞_6个可用于检查Node.js中漏洞的工具
node/js 漏洞 Vulnerabilities can exist in all products. The larger your software grows, the greater th ...
node mongoose_如何使用Express，Mongoose和Socket.io在Node.js中构建实时聊天应用程序
node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...
node.js中模块_在Node.js中需要模块：您需要知道的一切
node.js中模块 by Samer Buna 通过Samer Buna 在Node.js中需要模块:您需要知道的一切 (Requiring modules in Node.js: Everythi ...

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

node.js中模块化开发（Gulp4）相关推荐

最新文章

热门文章