npm以及gulp相关操作

hyperv

　　在工作流相关的第一篇博客中,我们安装了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任务.
　　好了,讲到这里,我们的文件操作已经完成了,今天的分享就到这里,本文若有错误或不足,还请指正补充,谢谢!