nodejs用gulp管理前端文件方法

1、安装node.js（https://nodejs.org/en/）

安装后使用node -v查看版本

node安装完之后会顺带安装npm

ps：npm其实是Node.js的包管理工具（package manager）为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。

同样用npm -v查看版本

2、安装gulp插件：npm install -g gulp

3、本地创建一个项目文件并用gulp管理

1>在D盘创建要给空文件夹Gulp_Test 。Win+R打开命令窗口并定位到当前项目目录，然后输入指令：npm init 回车（有git的童鞋在文件夹里直接右键 git bash here也可），命令执行期间会提示输入一些关于项目的描述信息，非必填一路回车即可。

完成之后文件夹中会生成一个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！

赞 (0)

相关推荐

  • Gulp实现静态网页模块化的方法详解

    前言 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解决了.再然后,产品经理看了几遍后突然说顶部的某块需要改改设计...突然感觉好尴尬~~(心里是万马奔腾~),然后呢?然后就期待下一次的万马奔腾!!! 虽然类似问题的解决方案很多,但是纯前端,不用各种框架的情况下,一种比iframe更靠谱的解决方案莫过于用像gulp这样的构建工具来完成.虽然在体验上也许会

  • angularjs使用gulp-uglify压缩后执行报错的解决方法

    问题出现原因是由于压缩之后变量变成了,e.s.t等,需要依赖注入的方法没有使用中括号注入,而在function的参数中直接使用,导致压缩之后无法识别需要依赖注入的模块.例如: var module= angular.module('homeApp', ['ui.router']); module.config(function ($sceProvider) { $sceProvider.enabled(false); }) 改为: var module= angular.module('home

  • gulp教程_从入门到项目中快速上手使用方法

    gulp是什么? gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率.在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作" 一.安装gulp与压缩js文件 命令: npm install gulp -g npm install gulp --save-dev 初始化项目package.json的配置:n

  • 浅谈gulp创建完整的项目流程

    浅谈gulp创建完整的项目流程

    gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查.合并.重命名.压缩.格式化.浏览器自动刷新.部署文件等功能. 所有的环境都是在 node 安装好的基础上执行的. node -v 查看node的安装情况.npm -v查看npm 的安装情况. gulp自动化构建常用参数 1.src 读取文件或者文件夹 2.dest 生成文件也就是写文件 3.watc

  • angular1配合gulp和bower的使用教程

    一 安装gulp和bower gulp安装: npm install -g gulp bower安装: npm install -g bower ==注:== angularjs的一些包文件我们是通过bower来管理的 二 bower使用 使用bower初始化一个项目: bower init 填写工程名,描述等等那些东西 安装angularjs:bower install --save angular 创建.bowerrc文件(注意window最好用命令行创建) 三 自动化工具gulp的使用 初

  • nodejs实现简单的gulp打包

    最近换了家新公司,由于是创业公司,项目基本从零开始搭建.工作几年,也没想过写点什么技术性的东西,今天突然心血来潮,哦当然,我这个人总是特别容易心血来潮,不定想干点啥,不说废话了,毕竟上班呢,开小差也不太好.忙了一个月,项目初见雏形,也基本可以1.0上线了,趁着等文案的时间,简单写点gulp打包的东西,等明儿有空再来一篇详细的,再有空再来个webpack的,哎呀,这个有空也不知道是啥时候,莫怪,好像又废话了几句.stop,stop. 从头儿来吧,首先创建一个package.json文件,就npm

  • gulp安装以及打包合并的方法教程

    gulp安装以及打包合并的方法教程

    前言 gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. 安装.打包合并 1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm install -g cnpm --registry=h

  • nodejs用gulp管理前端文件方法

    1.安装node.js(https://nodejs.org/en/) 安装后使用node -v查看版本 node安装完之后会顺带安装npm ps:npm其实是Node.js的包管理工具(package manager)为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码.如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐.于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上

  • nodejs npm包管理的配置方法及常用命令介绍

    1. 输入 npm config ls -l 可以查看当前的目录设置 复制代码 代码如下: ; cli configslong = true ; builtin config C:\Program Files (x86)\nodejs\node_modules\npm\npmrcprefix = "C:\\Users\\sam\\AppData\\Roaming\\npm" ; default valuesalways-auth = falsebrowser = "start

  • nodeJS删除文件方法示例

    本文实例讲述了nodeJS删除文件方法.分享给大家供大家参考,具体如下: var fs = require("fs"); var path = require("path"); deleteFolderRecursive = function(url) { var files = []; //判断给定的路径是否存在 if( fs.existsSync(url) ) { //返回文件和子目录的数组 files = fs.readdirSync(url); files.

  • javascript文件加载管理简单实现方法

    本文实例讲述了javascript文件加载管理简单实现方法.分享给大家供大家参考.具体如下: 这里介绍超级简单的进行javascript的文件(模块)的加载管理, 实现sea.js或者require.js核心功能,用一行 <script src="js/light/light.js"></script> 加载所有的js文件. //按照lightJs的顺序,让网页加载js文件: var lightJs = [ "./js/light/pre/jquery

  • 利用yarn代替npm管理前端项目模块依赖的方法详解

    本文主要给大家介绍了关于yarn代替npm管理前端项目模块依赖的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 什么是 yarn? 简单来说,yarn 是一个与 npm 功能相同的工具,用于前端项目的依赖管理.在使用 npm 的项目中,使用 npm 命令的地方都可以使用 yran 来代替. 为什么要使用 yarn 替代 npm 呢?yarn 相对 npm 来说,主要的特点有: 离线.并行安装:依赖并行安装,缓存已下载过的依赖并优先使用,各种优化使得安装依赖速度显著提升

  • Django后台获取前端post上传的文件方法

    由于初学Django所以对于其特有的表单模板和models中的filefiled并不是特别熟悉.因此在本次开发中还是依照以往自己在html中写好图片提交表单: 注意在<form>表单的定义中一定要加上enctype＝ "multipart/form-data"属性,否则后台可能会取不到文件. 在form表单后一定要有{% csrf_token %} 我们在控制页面可以看到,当我们通过这样的表单进行提交后,FILES一栏中会有一个文件. 我们可以在views.py中通过 im

  • 使用gulp构建前端自动化的方法示例

    使用gulp构建前端自动化的方法示例

    gulp是一个自动化构建工具,开发者可以用它来自动执行一些常见的任务.这里以我之前做的一个demo为例,简要介绍如何使用gulp实现前端工程自动化. 项目结构 其中src目录下表示的是项目的源代码,可以看到其中有less.js.html等,而dist目录则是保存的是gulp编译后生成的代码,相当于生产环境.最后也最重要的是gulpfile.js,这个文件用于设置gulp相关的配置,类似于webpack中的webpack.config.js. 安装 这里使用的gulp为v3.9.1,语法和最新的v

  • python后端接收前端回传的文件方法

    如下所示: filename=None     if request.method == 'POST' and request.FILES.get('file'):         from django.core.files.storage import FileSystemStorage         myfile = request.FILES['file']         fs = FileSystemStorage()         filename = fs.save(myfi

  • JS中使用gulp实现压缩文件及浏览器热加载功能

    JS中使用gulp实现压缩文件及浏览器热加载功能

    gulp类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 一.安装gulp 首先,你要安装过nodejs,如果没有安装过的同学请自行下载.  先再命令行里输入   npm install gulp -g   下载gulp 二.创建gulp项目 创建一个你需要项目文件夹,然后在根目录输入  npm init  (npm init命令会为你创建一个package.json文件,这个文件保存着这个项目相关信息.比如你用到的各种依赖) 三.使用npm install 安

  • 如何基于js管理大文件上传及断点续传详析

    如何基于js管理大文件上传及断点续传详析

    目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何

随机推荐