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-valid)的使用方法
Nov 18 NodeJs
Nodejs极简入门教程(一):模块机制
Oct 25 NodeJs
Nodejs极简入门教程(二):定时器
Oct 25 NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
Nodejs学习item【入门手上】
May 05 NodeJs
用nodejs搭建websocket服务器
Jan 23 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
用Nodejs搭建服务器访问html、css、JS等静态资源文件
Apr 28 NodeJs
nodejs简单实现TCP服务器端和客户端的聊天功能示例
Jan 04 NodeJs
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
Jul 31 NodeJs
nodejs基础之buffer缓冲区用法分析
Dec 26 NodeJs
nodejs中实现修改用户路由功能
May 24 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
use jscript List Installed Software
2007/06/11 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
手机端转换rem适应
2017/04/01 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python for循环中的陷阱详解
2018/07/13 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
平面设计自荐信
2013/10/07 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
难忘的一天教学反思
2014/04/30 职场文书
国际商务专业求职信
2014/07/15 职场文书
代办委托书怎么写
2014/08/01 职场文书
捐款感谢信
2015/01/20 职场文书
管理失职检讨书范文
2015/05/05 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技
vue实现简易音乐播放器
2022/08/14 Vue.js