npm以及gulp相关操作
在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们需要使用的各种包,我们需要知道的是,nodejs是一个模块化的用法,它的各个功能都封装成一个一个的模块部分,关于模块的详细部分在nodejs部分再去详细介绍.那么既然它是由模块组成的,那么我们有时候就需要给我们本地的项目区添加各个模块,添加完成之后,我们自己在本地用着很爽,那当项目发布的时候,或者我们给被人传我们的代码的时候,我们还需要将项目依赖的各个模块一块打包传递过去,这是很繁琐费流量的一件事,所以我们可以在本地创建一个文件,文件中记录我们项目的信息,包括这个项目依赖的各个模块,那么别人拿到我们的的代码的时候,就可以根据我们这个文件去下载模块了,这时我们就需要用到一个文件package.json
具体的生成方式也很简单,在你想要使用npm的文件夹下打开终端,输入命令npm init,这时就会让你初始化这个package.json文件了,
生成这个文件后我们就可以使用npm指令进行模块的下载了,这里我们可以看到package.json中,有文件名,版本号,项目描述,项目主文件,全局依赖,项目依赖模块,脚本scripts等组成部分,其中,我们现在需要明白的一个地方是其中的dependencies和devDevpendenies区别,前者是你生产环境需要依赖的库,后者是你开发时候用的库,比如测试库,测试服务器之类的,在真实生产环境是不需要的,如果我们使用了构架工具,例如gulp之类的,打包的时候,是不会将dev库打包进去的.那么我们有了npm,就要来看一下它的基本使用命令吧,
1,npm install <moduleNames>:安装Node模块, 例如: npm install gulp,npm install -g gulp //第二种为全局安装,第一种为本地安装,区别在于全局安装会将模块安装到Node的安装目录下,而本地安装时安装到当前文件夹目录下2,npm uninstall <moduleName>:对应的卸载模块3,npm view <moduleName>:查看模块的package.json文件4,npm list :查看当前目录下已安装的node包,5,npm help:查看帮助命令6,npm view moduleName dependencies:查看包的依赖关系7,npm view moduleName repository.url: 查看包的源文件地址8,npm help folders:查看npm使用的所有文件夹9,npm rebuild moduleName: 用于更改包内容后进行重建10,npm outdated:检查包是否已将过时,11,npm update <moduleName> 用于更新node模块12,npm search packageName :在发布一个npm包的时候,可以检查包名是否已经存在,13,npm -v :查看当前npm的版本号14,npm root :查看当前包的安装路径
那么接下来当我们的项目需要用到模块或者包的时候,我们就可以npm install它,这比你去手动的去官网下载方便了好多,当你创建好一个项目的时候,我们需要对要发布的这样项目进行好测试,打包,压缩混淆等等一系列步骤,而这些步骤正是繁琐无意义的,所以伟大的程序员就会去找工具来代替他,这就像人类发明其他工具是一个道理的,当我们厌倦了用手吃食物的时候,我们就发明了筷子和刀叉(印度除外).
目前比较流行的工具有grunt,gulp,yeoman等工具,其中gulp的核心设计时基于unix流的概念,利用nodejs的强大的流,不需要写中间文件,可以更快的完成构建,让简单的事情继续简单,复杂的任务变得可管理,而且它简单易学,它的核心API只有5个,掌握了5个API就学会了gulp,之后可以通过管道流去组件自己的任务.我们就以gulp为示例来进行一个项目的压缩管理.
首先,我们需要通过npm下载gulp,在当前项目的文件夹下打开终端输入命令npm install --save-dev gulp,下载完成后,我们可以在package.json中查看到dev依赖,在node_modules中也可以查看到.这时我们已经安装好了gulp,我们还需要再当前项目的根目录下新建一个gulpfile.js文件来进行gulp的各种任务的书写,至于为什么这么写,官方规定!
首先来个示例使用一下gulp,在gulpfile.js文件中写入以下内容:
var gulp1 = require('gulp'); gulp1.task('default',function(){console.log("默认任务执行") });//在终端中输入 gulp ,这时边执行了gulp的默认任务default,输出文字
这时我们可以看到,我们使用的require导入了gulp模块,这时commonJS格式的,在nodejs的时候会进行详解,我们现在要知道require后,gulp1就是gulp模块了.这时我们已经使用了gulp的一个API了,对,就是task,它的作用是定义一个任务.
gulp.task(任务名字,任务列表,任务动作(){//这里是任务将要执行的动作 })//其中任务名字,和任务动作是必须的,而任务列表是非必须的,这是一个包含任务的数组,在当前任务完成后依次执行数组中的任务.
当我们有任务的时候,我们需要去给这个任务确定执行目标,这时候就引出了我们的另一个API,gulp.src();
gulp.src('src/js/*.js').pipe(零件1)//零件就是值要对当前文件执行的操作,例如压缩, .pipe(零件2).pipe(零件3);//我们之前就说过,gulp是基于nodejs强大的流的,我们通过src找到文件夹js下的所有js类型的文件,//然后这些js文件就像进入了一个流水线一样,//通过第一个管道来到第一个函数装配第一个零件,然后再通过管道流向了其他配件处,直到整个工程完毕.
我们现在可以创建一个任务,然后匹配到所有的js文件,对他们进行一系列操作,那么操作完成的文件呢?比如我们将所有的js文件进行了压缩,混淆,那这一部分文件放在哪去呢?当然不能够将原文件变成压缩后的文件了,这时候,我们需要将这些文件流向指定的文件夹.gulp中为我们提供了一个API,gulp.dest():
gulp.task('jsminTask',function(){gulp.src('src/js/*.js').pipe(gulp.dest('dist/js/')); });//在这个任务中,当动作执行到即将完毕的时候, //会将当前管道中的文件流向dest()中的文件夹下, //如果dest()中的文件夹不存在会自动创建
现在我们基本上已经可以来创建一个成形的任务了,但是,因为gulp中的api很少,而它的大部分API都是需要下载,当然我们可以使用npm下载,这里我们示例中就对于这个文件进行压缩,混淆,打包这三个步骤,它所依赖的包分别是jsmin,uglify,concat.我们可以去npm的官网,npmjs.com中去查找我们需要的包,而且我们也不需要去死记硬背各个包的作用,因为它的包实在是太多了,多到你记不完,我么只需要记住几个常用的包,当使用的时候可以进行查找,每个包的介绍都有用法实例,
gulp.task('jsminTask',function(){gulp.src('src/js/*.js').pipe(concat('all.js')). //打包成一个文件pipe(jsmin()).//进行压缩pipe(uglify()).//进行混淆pipe(gulp.dest('dist/js/'));//流向指定的文件夹下 }); //在终端输入gulp jaminTask就会执行当前任务了,执行完任务可以去dist/js下查看是否有all.js文件夹//我们对css的打包压缩等操作可以去在设置一个cssminTask任务,HTML压缩同理
我们已经算是成功的对一个项目进行了发布前的工具发操作,但是我们还发现一个问题,那就是,当我们改动了项目中的文件内容后,我们还需要手动去再执行一次任务,这显然是很不智能的,所以便有了gulp.watch这个api,
gulp.watch('src/js/*.js',['jsminTask']);//这个API的作用是监听js文件,当js文件发生改变的时候,就执行jsminTask任务.
好了,讲到这里,我们的文件操作已经完成了,今天的分享就到这里,本文若有错误或不足,还请指正补充,谢谢!
转载于:https://www.cnblogs.com/blackgan/p/5956748.html
npm以及gulp相关操作相关推荐
- (30)Gulp 文件操作
一.文件操作方式-缓冲方式 缓冲方式就是源文件从内存缓冲中操作,最终得到目标文件,那么有个缺点就是例如我们看一部电影,这个电影的内存大小是10G,那么我们的内存存不下10个G,这时候我们的目标文件会出 ...
- Node.js学习之路--npm包管理工具操作汇总
因为在学习使用Express(第三方Web开发框架)时需要下载这个包,所以使用npm包管理工具这个相关的操作,现在将其相关的操作进行汇总. npm命令在cmd或者powershell中进行;注意:使用 ...
- 代码管理工具 (含git、npm、gulp)
1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...
- 2021年大数据HBase(五):HBase的相关操作JavaAPI方式
全网最详细的大数据HBase文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 前言 HBase的相关操作-JavaAPI方式 一.需求说明 ...
- 2021年大数据HBase(四):HBase的相关操作-客户端命令式!【建议收藏】
全网最详细的大数据HBase文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 系列历史文章 前言 HBase的相关操作-客户端命令式 1.进入HBase ...
- 2021年大数据Spark(二十五):SparkSQL的RDD、DF、DS相关操作
目录 RDD.DF.DS相关操作 SparkSQL初体验 SparkSession 应用入口 获取DataFrame/DataSet 使用样例类 指定类型+列名 自定义Schema ...
- 【数据结构】二叉树及其相关操作
二叉树的定义 二叉树是一个由结点构成的有限集合,这个集合或者为空,或者由一个根节点及两棵互不相交的分别称作这个根节点的左子树和右子树的二叉树组成. 二叉树并非一般的树形结构的特殊形式,它们是两种不同的 ...
- Linux之用户组相关操作 groupadd groupdel
Linux之用户组相关操作 groupadd groupdel 1. 创建用户组 命令 说明 groupadd 创建(添加)用户组 创建用户组效果图: [grep是搜索功能,详情博文:https: ...
- Linux之用户相关操作
Linux之用户相关操作 1. 创建用户 [创建后会立即让设置密码] 命令 说明 useradd 创建(添加)用户 useradd命令选项: 选项 说明 -m 自动创建用户主目录,主目录的名字就是用 ...
最新文章
- Django框架之第二篇
- 枚举参考Hurry Up(三分)
- 大数据时代如何赢得财务人才
- python毕业设计开题报告-基于Python的教学互动系统的设计与实现开题报告
- 报名倒计时 | 挣脱流量束缚,社交电商的未来在哪里?
- Inspector a ProgressBar(定制属性面板)
- HTML元素参考手册 HTML Elements Reference
- 花生采摘(洛谷P1086题题解,Java描述)
- [转]你可能不知道的五个强大HTML5 API
- 零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
- Android ROM制作教程,让你拥有自己喜欢的ROM
- 如何通过SCJP考试(含真题分析和考点)
- 三角网导线平差实例_附合导线平差步骤
- 中国顶级富豪沉浮录:财富常青树之谜与大败局规律
- 揭晓网站建设对于企业发展的重要作用
- 现在国内程序员的工资是什么行情?
- 前端必备:六款CSS工具让代码充满魅力
- yum是干什么的_linux下的yum命令详解
- 禅道集成聊天工具喧喧,敏捷开发沟通面对面
- ubutnu18+cuda11.1+cudnn8.0.4+nvidia-driver-465