**
一、名词介绍:
**
Npm——node包管理工具
一开始我不理解,包管理工具是什么鬼。后来用到的gulp也好,gulp的插件包也好,都是要在npm这个里边弄出来的。
可以理解为,一个硬盘,里边放的各种整理好的、适用于各种功能的且不重复的文件夹(插件),然后我们需要啥,就去里边摘下来。
当然也可以用它来删除插件;
rimraf删除gulp的模块插件
1、安装:npm install -g rimraf(全局安装),如果安装了cnpm,也可使用cnpm install -g rimraf 命令
2、使用:先定位目标文件夹的父级目录,然后命令行输入rimraf ***(***为需要删除的文件夹名称);
二、安装流程:
1.Node环境安装
2.Npm-
3.->Cnpm
4.安装gulp【特别说明:gulp需要安装两次,一全局,一局部】
a) 全局安装gulp
5.跳转本地项目目录
6.安装package.json配置文件
7.安装本地gulp
a) 本地安装gulp+package.json配置文件(初始化项目配置)+gulpfile.js文件
8.安装gulp插件
9.配置gulpfile.js(9,8可以反过来,可以js文件中需要什么插件再装什么插件)
10.Gulp实践流程:配置gulpfile.js文件命令,下载、调用gulp插件。
1.node环境安装:
Node官网下载node安装文件:https://nodejs.org/en/
安装方法:一直点下一步。。。。。
2.npm:
据说一般情况下,安装好nodejs后,npm就装好了。
这时要看一下版本号就知道了:命令行输入——
node -v
npm -v
node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;
npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器,
最后出现版本号就是装上了。
3.cnpm
为什么要安装cnpm?据说npm的服务器在国外,如果我们在国内从npm上下载文件会反应慢,而且可能会异常报错。。装上这个东东就快了。。。
安装命令:
——全局安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
定位到本地目录(你要放项目的目录)之后再安装局部镜像
——局部安装:npm install cnpm --registry=https://registry.npm.taobao.org
**装好cnpm后,接下来你的命令中,都要写cnpm而不是npm了。
**其实,镜像只要装到局部(本地目录)就好了,毕竟全局我们只装一个gulp,
但是在本地目录中却要装好多个用到的gulp插件,如果没有镜像,要等半天也是不开心的。
4.安装全局gulp
全局安装(全局安装gulp目的是执行gulp任务)
安装命令:cnpm install gulp -g
安装完毕后,看一下版本号有没有(命令行输入:gulp -v),就知道有没有安装成功了
注意:没有装cnpm的,这里用npm,以后不再赘述
5.定位目录,
定位目录:就是找到你要开始创建项目的位置,在这个位置再建一个gulp项目文件夹,以后就可以在这里开始工作了。
定位命令: cd+ 空格 + 目录路径
6.创建package.json文件——初始化项目配置
安装命令:cnpm init(或者npm init)
Package文件里的配置中:
项目名称name,
项目版本version,
项目描述description
以上这三个是必须填写的,其他的就一直回车就ok了。
有时候,name命名会报错,自己全英文命名就好了,尽量别用标点符号。
还有的warn情况是因为,你没写git仓库的地址,who care。。。
最后回车完了出现这句,后边就打Y就好。
扩展:npm install --production只下载dependencies节点的包
7.安装局部gulp
安装命令: cnpm install gulp --save-dev(或者npm install gulp --save-dev)【哇!哇!注意空格哇!gulp和后边的横线是有空格的】
特别记得这个:–save-dev:这个就是装到局部的标志啊,以后在局部装插件也是少不了他的
在当前项目文件夹下安装gulp,只要你定位到那个目录下,就可以在那个目录下安装本地gulp了。
安装完了以后,在你安装的那个目录下边会发现一个node-modules文件夹,以后用到的gulp插件都会在这个里边了。
然后package.json文件里也有了“devDependencies”依赖项
8.配置gulpfile.js(9,8可以反过来,可以js文件中需要什么插件再装什么插件)
在本地项目根目录下新一个gulpfile.js文件,他是gulp项目的配置文件,不同于backage.json文件。
(疑问:gulpfile.js的位置,可以随着不同的项目新建不同的文件,然后分别放到不同项目的根目录下?答案:yes)
文件内配置信息如下代码:
var gulp = require(‘gulp’);
详解:
var gulp = require(‘gulp’);//引入gulp组件,这一句是每一个gulpfile.js里边所必须有的,标配!!标配!!标配!!
var sass = require(‘gulp-sass’);//导入工具包require(node-modules)里的对应模块,以后你需要什么插件就对应执行这一句,不过要把变量名和括号里的插件名字改掉。
gulp.task(‘taskName’,function(){ });//定义一个task任务,名字为taskName:(这里是你自定义任务名称)、设置一个回调函数。
回调函数里边定义要处理的任务
任务呢就像火车一样,一环扣一环用点连接,最后一个才有分号结束。其实感觉和jq的一样,就是”链式调用”,在这里呢人家叫”流式操作”
其他gulp api的代码意思见后边<gulp api详解>
另外,需要哪个gulp插件的时可以去网上搜这个gulp插件,然后gulpfile.js里边的配置网上就有了。。
9.安装gulp插件
安装命令:cnpm install 替换插件名称 --save-dev(或者npm install 替换插件名称 --save-dev)
这里呢,你需要什么gulp插件就去命令行里装,以gulp-sass为例。
cnmp install gulp-sass --save-dev 或者npm install gulp-sass --save-dev
Gulp的插件很多,需要什么就去官网查:http://gulpjs.com/plugins/
这个大神的中文总结也不错:http://www.ydcss.com/archives/category/构建工具
常用的也就那么几个,见<常用gulp插件集锦>。
10.Gulp实践—使用gulpfile.js并调用gulp插件
调用gulp插件
gulp 或者( gulp taskName)
直接调用gulp或者输入gulp+任务名称
比如在上边的gulpfile.js里边,我想调用sass任务,就直接在命令行输入gulp sass
如果我想调用所有的,就输入 gulp,命令行会自动执行default任务,并按顺序执行’lint’, ‘sass’, 'scripts’任务