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装置实现

  1. 配置我的项目

上面以一个简略案例来做演示：创一个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文件也不反对正文，这点得留神！
  1. 本地装置gulp及gulp插件

本地装置gulp

npm install gulp --save-dev

装置实现后，咱们再看我的项目中的变动：
如图：

  1. gulp模块下载到我的项目中的node_modules文件夹中。
  2. 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
装置实现，如下图

  1. 创立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']);
理论的我的项目必定没这么简略，想想咱们个别不可能对某几个文件操作，应该是对一批文件操作，那样的波及到文件匹配的问题了，临时不开展了。
  1. 运行gulp

能够看到，咱们在gulpfile.js创立了3个工作，其实是两个，最初一个是合并下面两个工作。
而后咱们就能够在终端来运行下面的作务了，在终端输出

gulp minify-css

运行后果如下图：在dist/css/目录下生成了咱们压缩后的css文件。

  1. 用webStrom运行

到目前为至，大家根本晓得gulp在我的项目中的使用了，只少根本流程是没问题了。然而，时刻应用终端还是不怎么不便的，上面咱们间接在webStrom中运行下面的gulp工作。
在webStrom中关上gulpfile.js文件 》右键抉择 Show Gulp Tasks 》Gulp面板上曾经列出gulpfile.js创立的工作 》选中工作运行即可。
是不是十分不便!

小结

看似步骤不少，其实没几步，咱们是从零开如说起的次要是为了演示整个过程了解其中的原理，对于个别用户来说，nodejs npm应该早装好了。
其实咱们次要须要做的如下：

  1. 创立package.json，下面咱们应用的 npm init办法，实际操作中咱们个别是把之前创立好的package.json间接拿过去，放到我的项目根目录下，而后 npm install 一下，这样咱们要用到的gulp插件主动就装置好了。
  2. 编写gulpfile.js,gulp就那么些api，咱们罕用到的可能就那些插件，所以咱们齐全能够编写一个gulpfile.js而后在此基础上批改一下就行了。