gulp——如何安装并运行

gulp帮助我们完成前端大量的重复性操作

一、全局安装gulp

$ npm install -g gulp

前提是你已经配置了全局的npm

理论上这个，这样已经安装完成了。但是，gulp作为一门工具，比较特殊：gulp的包中既包含工具，页包含一些编程的API

二、依赖安装

第一步：切换到项目所在目录
第二步：执行命令

$ npm install --save-dev gulp

-dev的意思：项目虽然依赖gulp，但仅限于开发阶段，这里的-dev的命令就是让其与最终的版本区分开来。

例如：当我们npm init一个项目的时候，会得到一个package.json文件

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

依赖安装之后，文件变了：

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1"
  },
  "devDependencies": {
      // 这里多了gulp
    "gulp": "^3.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装依赖之后，接下来看怎么使用gulp，它是通过什么方式为我们节省重复操作的。

三、在项目根目录下创建一个名为 gulpfile.js 的文件：

/*gulp的主文件，用于注册任务*/

'use strict';

// 此处代码都是由node执行
// 载入gulp模块
var gulp = require('gulp');

// 注册一个任务
gulp.task('say',function(){
    console.log('hello gulp')
});

通过在主文件中注册任务，然后，执行任务，我们可以用简单的命令执行大量重复操作。

执行命令如下

//gulp 要执行任务的名称（这里是say）
项目目录下> gulp say