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如何复制文件
Mar 09 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
Nodejs进阶:基于express+multer的文件上传实例
Nov 21 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
NodeJS遍历文件生产文件列表功能示例
Jan 22 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
深入学习nodejs中的async模块的使用方法
Jul 12 NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 NodeJs
理解nodejs的stream和pipe机制的原理和实现
Aug 12 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
NVM安装nodejs的方法实用步骤
Jan 16 NodeJs
如何利用nodejs自动定时发送邮件提醒(超实用)
Dec 01 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/04/10 PHP
php适配器模式介绍
2012/08/14 PHP
教你如何使用php session
2013/10/28 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
JavaScript编码小技巧分享
2020/09/17 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
django model通过字典更新数据实例
2020/04/01 Python
python的dict判断key是否存在的方法
2020/12/09 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
美工的岗位职责
2013/11/14 职场文书
升职自荐信
2013/11/28 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
快餐公司创业计划书
2014/04/29 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技