前端自动化构建工具gulp(一)

1.gulp的安装

创建一个gulp项目

mkdir gulpProject

进入到项目所在文件夹

cd gulpProject

 

首先，要确保安装了nodejs环境，然后通过nodjs包管理工具npm全局安装gulp:

npm install -g gulp

全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：

npm install gulp

如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev：

npm install --save-dev gulp

这样，gulp就安装完成了。

 

2.开始使用gulp

2.1简历gulpfile.js文件

在当前项目下简历 gulpfile.js 文件，这是gulp的主文件。下面是一个最简单的 gulpfile.js 文件内容示例，它定义了一个默认的任务。

var gulp = reuqire('gulp');

gulp.task('defaullt', function() {
    console.log('Hello World!'); 
})    

此时我们的目录结构是这样的：

├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json

2.2运行gulp任务

要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。