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 相关文章推荐
Ubuntu中搭建Nodejs开发环境过程分享
Jun 01 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
Nodejs中解决cluster模块的多进程如何共享数据问题
Nov 10 NodeJs
解析NodeJs的调试方法
Dec 11 NodeJs
简单好用的nodejs 爬虫框架分享
Mar 26 NodeJs
详解nodejs微信公众号开发——5.素材管理接口
Apr 11 NodeJs
NodeJS自定义模块写法(详解)
Jun 27 NodeJs
nodejs async异步常用函数总结(推荐)
Nov 17 NodeJs
Nodejs调用Dll模块的方法
Sep 17 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 NodeJs
nodejs简单抓包工具使用详解
Aug 23 NodeJs
Nodejs + sequelize 实现增删改查操作
Nov 07 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下intval()和(int)转换使用与区别
2008/07/18 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
python查看模块,对象的函数方法
2018/10/16 Python
详解Python发送email的三种方式
2018/10/18 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
详解Python中namedtuple的使用
2020/04/27 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
文明寝室标语
2014/06/13 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
后天观后感
2015/06/08 职场文书
《月光曲》教学反思
2016/02/16 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL