关于前端:前端环境安装

7次阅读

共计 2664 个字符，预计需要花费 7 分钟才能阅读完成。

node -v

去 https://nodejs.org/en/ 下载安装文件装置即可。
装置实现后，在终端输出 node -v 回车打印出 nodejs 的版本号，阐明 nodejs 装置胜利。
在终端输出npm -v

回车打印出 npm 的版本号，阐明 npm 也装置胜利(node 安装包中已集成了 npm, 因而在装置 nodejs 的同时也装置了 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 下临时还没找到。

在终端输出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 插件

npm install gulp --save-dev

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

gulp 模块下载到我的项目中的 node_modules 文件夹中。
package.json 中写入了 devDependencies 字段，并在该字段下填充了 gulp 模块名

–svae-dev 的作用就是将方才装置的模块写入 package.json 中。

大家可能会感觉有些奇怪，刚不是装置了 gulp 吗？对，那是全局装置，为的是能在端终运行 gulp 工作的，这里是我的项目级别的装置，真正的 gulp 模块装置到我的项目的 node_modules/ 下了，前面的插件都是依赖 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 而后在此基础上批改一下就行了。

正文完