gulp安装以及使用流程

1. 查看电脑中是否有安装nodejs(node.js就是一种运行环境,JavaScript的运行环境,也是一种编程语言  )

• window +R   输入 node -v   回车 如果出现版本号 证明已经安装成功 ,否则需要先安装node.js
• 如果没有安装 ,去 https://nodejs.org/en/下载安装文件安装即可,可以选择版本
• 安装完成后，在终端输入node -v回车打印出nodejs的版本号，说明nodejs安装成功。
• 在终端输入npm -v
• 若果安装成功了,也说明npm安装成功了,node中自带npm(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm)

 

2. 设置npm

由于国外的服务器可能在国内访问不大稳定,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

3. 安装gulp(全局)

• 在终端输入npm install gulp -g
• 安装完成后，同样输入gulp -v输出相应的版本号，则说明安装成功。

至此gulp安装完成

---

4. 配置项目

先是配置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文件也不支持注释，这点得注意！

5. 本地安装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

6. 创建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']);

实际的项目肯定没这么简单，暂时不展开了。

7. 运行gulp

可以看到，我们在gulpfile.js创建了3个任务，其实是两个，最后一个是合并上面两个任务。

然后我们就可以在终端来运行上面的作务了，在终端输入

gulp minify-css