node
node -v
- 去 https://nodejs.org/en/下载安装文件装置即可。
- 装置实现后，在终端输出
node -v回车打印出nodejs的版本号，阐明nodejs装置胜利。 - 在终端输出
npm -v
回车打印出npm的版本号，阐明npm也装置胜利(node安装包中已集成了npm,因而在装置nodejs的同时也装置了npm)。
npm
npm -v
因为https://www.npmjs.com在国内拜访不稳固，因而倡议应用国内镜向站点https://npm.taobao.org
具体方法如下：
- 通过config命令
npm config set registry https://registry.npm.taobao.org
- 命令行指定
npm –registry https://registry.npm.taobao.org info underscore
- 编辑 npmrc文件，在该文件中退出registry = https://registry.npm.taobao.org
这个在windows下找到了npmrc。 mac下临时还没找到。
gulp
- 在终端输出
npm install gulp -g - 装置实现后，同样输出
gulp -v输入相应的版本号，则阐明装置胜利。
至此gulp装置实现
- 配置我的项目
上面以一个简略案例来做演示：创一个gulp文件夹作为我的项目根目录，我的项目构造如下：!
咱们以罕用的 gulp-uglify、gulp-concat、gulp-minify-css为例。
先是配置package.json文件，有三种办法：
- 能够用记事本之类的创立一个
- 用npm init建
- 也能够复制之前我的项目的创立好的package.json
咱们用npm init 的办法来创立package.json
在终端将当前目录切换至我的项目所在目录，而后输出npm init，一路回车，最终在我的项目根目录下生成package.json:
{
"name": "gulp_test", /*我的项目名,切记这里命名不要与模块一样，如命名为gulp，要地装置gulp时就会出错*/
"version": "1.0.0", /*版本号*/
"description": "", /*形容*/
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "", /*作者*/
"license": "ISC" /*我的项目许可协定*/
}正文是我本人加的，npm init生成是没有正文的，而且json文件也不反对正文，这点得留神！
- 本地装置gulp及gulp插件
本地装置gulp
npm install gulp --save-dev 装置实现后，咱们再看我的项目中的变动：
如图：
- gulp模块下载到我的项目中的node_modules文件夹中。
- package.json中写入了devDependencies字段，并在该字段下填充了gulp模块名
–svae-dev 的作用就是将方才装置的模块写入package.json中。
大家可能会感觉有些奇怪，刚不是装置了gulp吗？对，那是全局装置，为的是能在端终运行gulp工作的，这里是我的项目级别的装置，真正的gulp模块装置到我的项目的node_modules/下了，前面的插件都是依赖gulp模块的。
本地装置gulp插件
接下来装置下面提到的三个插件,在终端中输出npm install --save-dev gulp-uglify gulp-concat gulp-minify-css
装置实现，如下图
- 创立gulpfile.js文件
在我的项目根目录下创立gulpfile.js文件，而后编写如下代码，这些代码没什么好解释的，具体能够参考gulp的api
/*引入gulp及相干插件 require('node_modules里对应模块')*/
var gulp = require('gulp');
var minifyCss = require("gulp-minify-css");
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//压缩
gulp.task('minify-css', function () {
gulp.src('css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('dist/css/'));
});
//
gulp.task('script', function () {
gulp.src(['src/a.js',"src/b.js"])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
gulp.task('default',['minify-css','script']); 理论的我的项目必定没这么简略，想想咱们个别不可能对某几个文件操作，应该是对一批文件操作，那样的波及到文件匹配的问题了，临时不开展了。
- 运行gulp
能够看到，咱们在gulpfile.js创立了3个工作，其实是两个，最初一个是合并下面两个工作。
而后咱们就能够在终端来运行下面的作务了，在终端输出
gulp minify-css运行后果如下图：在dist/css/目录下生成了咱们压缩后的css文件。
- 用webStrom运行
到目前为至，大家根本晓得gulp在我的项目中的使用了，只少根本流程是没问题了。然而，时刻应用终端还是不怎么不便的，上面咱们间接在webStrom中运行下面的gulp工作。
在webStrom中关上gulpfile.js文件 》右键抉择 Show Gulp Tasks 》Gulp面板上曾经列出gulpfile.js创立的工作 》选中工作运行即可。
是不是十分不便!
小结
看似步骤不少，其实没几步，咱们是从零开如说起的次要是为了演示整个过程了解其中的原理，对于个别用户来说，nodejs npm应该早装好了。
其实咱们次要须要做的如下：
- 创立package.json，下面咱们应用的 npm init办法，实际操作中咱们个别是把之前创立好的package.json间接拿过去，放到我的项目根目录下，而后 npm install 一下，这样咱们要用到的gulp插件主动就装置好了。
- 编写gulpfile.js,gulp就那么些api，咱们罕用到的可能就那些插件，所以咱们齐全能够编写一个gulpfile.js而后在此基础上批改一下就行了。
发表回复