nodejs用gulp管理前端文件方法


Posted in NodeJs onJune 24, 2018

1、安装node.js(https://nodejs.org/en/)

安装后使用node -v查看版本

nodejs用gulp管理前端文件方法

node安装完之后会顺带安装npm

ps:npm其实是Node.js的包管理工具(package manager)为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y,npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。

同样用npm -v查看版本

nodejs用gulp管理前端文件方法

2、安装gulp插件:npm install -g gulp

nodejs用gulp管理前端文件方法

3、本地创建一个项目文件并用gulp管理

1>在D盘创建要给空文件夹Gulp_Test 。Win+R打开命令窗口并定位到当前项目目录,然后输入指令:npm init 回车(有git的童鞋在文件夹里直接右键 git bash here也可),命令执行期间会提示输入一些关于项目的描述信息,非必填一路回车即可。

nodejs用gulp管理前端文件方法

完成之后文件夹中会生成一个package.json文件。

2>执行以下命令

//本地安装: npm install gulp --save-dev (gulp插件)

//本地安装: npm install gulp-concat --save-dev (合并插件)

//本地安装:npm install gulp-uglify --save-dev (压缩插件)

至此,所有准备工作已就绪,开始管理我们的项目吧。

(1)在项目根目录创建一个名为gulpfile.js的js文件

(2)在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下:

index.js:

var index={}; 
index={ 
test:function(argument){ 
console.log('test'); 
} 
} 
index.test();

main.js:

var main = {}; 
main.test=function(argument){ 
console.log("main test"); 
} 
main.test();

(3)在根目录创建build文件夹,用来存放打包后的文件

(4)编辑第(1)步创建的gulpfile.js文件,内容如下:

var fs = require('fs');
var gulp = require('gulp');//gulp自身 
var uglify= require('gulp-uglify');//引入压缩组件
var concat = require('gulp-concat');//引入合并组建
gulp.task('taskName', function() { 
// 找到src目录下的所有文件夹中的所有js文件
return gulp.src('js/*.js')
.pipe(uglify())//压缩 
.pipe(concat('all.min.js'))//输入到all.min.js中 
.pipe(gulp.dest('./build'))//指定目录 
.on('end', callback);//结束事件回调
}); 
//检查文件体积
function callback() {
var path = "./build/all.min.js";
var exists = fs.existsSync(path);
if (!exists) {
return;
}
var states = fs.statSync(path);
console.log("file size:" + Math.ceil(states.size / 1024) + "kb");
}

PS:taskName为变量,任务名。可以定义多个task,并根据glup+taskName执行不同的task

(5)执行gulp命令 :gulp taskName

(6)执行成功之后检查build文件是否有all.min.js生成

Don't go too far and forget why starting!

NodeJs 相关文章推荐
用nodejs访问ActiveX对象,以操作Access数据库为例。
Dec 15 NodeJs
基于NodeJS的前后端分离的思考与实践(二)模版探索
Sep 26 NodeJs
windows下安装nodejs及框架express
Aug 07 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
Nodejs进阶:基于express+multer的文件上传实例
Nov 21 NodeJs
Nodejs读取文件时相对路径的正确写法(使用fs模块)
Apr 27 NodeJs
NodeJS收发GET和POST请求的示例代码
Aug 25 NodeJs
nodejs发送http请求时遇到404长时间未响应的解决方法
Dec 10 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
Nodejs使用Mongodb存储与提供后端CRD服务详解
Sep 04 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
Nodejs核心模块之net和http的使用详解
Apr 02 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 #NodeJs
nodejs实现套接字服务功能详解
Jun 21 #NodeJs
详解Nodejs mongoose
Jun 10 #NodeJs
详解NodeJs开发微信公众号
May 25 #NodeJs
nodejs express配置自签名https服务器的方法
May 22 #NodeJs
通过nodejs 服务器读取HTML文件渲染到页面的方法
May 17 #NodeJs
解决nodejs的npm命令无反应的问题
May 17 #NodeJs
You might like
PL-880隐藏功能
2021/03/01 无线电
分享PHP header函数使用教程
2013/09/05 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
Angular 如何使用第三方库的方法
2018/04/18 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
学Python 3的理由和必要性
2019/11/19 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
初中校园之声广播稿
2014/01/15 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
家装电话营销开场白
2015/05/29 职场文书
爱国影片观后感
2015/06/18 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python