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的url截取模块url-extract的使用实例
Nov 18 NodeJs
nodejs获取本机内网和外网ip地址的实现代码
Jun 01 NodeJs
基于 Docker 开发 NodeJS 应用
Jul 30 NodeJs
nodejs搭建本地服务器并访问文件的方法
Mar 03 NodeJs
配置nodejs环境的方法
May 13 NodeJs
深入学习nodejs中的async模块的使用方法
Jul 12 NodeJs
让nodeJS支持ES6的词法----babel的安装和使用方法
Jul 31 NodeJs
NodeJS爬虫实例之糗事百科
Dec 14 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
nodejs连接mysql数据库及基本知识点详解
Mar 20 NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 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
php 文章采集正则代码
2009/12/28 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
实例解析php的数据类型
2018/10/24 PHP
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
js实现聊天对话框
2020/02/08 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python魔法方法功能与用法简介
2019/04/04 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
自我评价中英文语句
2013/11/30 职场文书
九年级数学教学反思
2014/02/02 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
大学毕业生求职自荐书
2014/06/05 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
冰雪公主观后感
2015/06/16 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python