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文件操作模块FS(File System)常用函数简明总结
Jun 05 NodeJs
Nodejs学习笔记之测试驱动
Apr 16 NodeJs
iPhone手机上搭建nodejs服务器步骤方法
Jul 06 NodeJs
浅析nodejs实现Websocket的数据接收与发送
Nov 19 NodeJs
NodeJS的Promise的用法解析
May 05 NodeJs
详解nodejs 文本操作模块-fs模块(四)
Dec 22 NodeJs
3分钟快速搭建nodejs本地服务器方法运行测试html/js
Apr 01 NodeJs
浅谈NodeJs之数据库异常处理
Oct 25 NodeJs
NodeJS实现自定义流的方法
Aug 01 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 NodeJs
图解NodeJS实现登录注册功能
Sep 16 NodeJs
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
Nov 18 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
destoon官方标签大全
2014/06/20 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
犀利的js 函数集合
2009/06/11 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python实现外卖信息管理系统
2018/01/11 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
应届生污水处理求职信
2013/11/06 职场文书
学习经验交流会主持词
2014/04/01 职场文书
高中课程设置方案
2014/05/28 职场文书
大专生求职信
2014/06/29 职场文书
科学发展观标语
2014/10/08 职场文书
2015年药房工作总结
2015/04/25 职场文书
小人国观后感
2015/06/11 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
PHP设计模式(观察者模式)
2021/07/07 PHP
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js