gulp的安装和使用

gulp的安装和使用

gulp安装前需有nodejs和npm环境(最好用cnpm)
npm介绍

1. 说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

2. 使用npm安装插件：命令提示符执行npm install [-g] [–save-dev]；

   1. ：node插件名称。例：npm install gulp-less –save-dev

   2. -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

   3. -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

3. 为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install –production只下载dependencies节点的包）。

4. 使用npm卸载插件：npm uninstall [-g] [–save-dev] PS：不要直接删除本地插件包

5. 删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦

6. 借助rimraf：npm install rimraf -g 用法：rimraf node_modules

7. 使用npm更新插件：npm update [-g] [–save-dev]

   1. 更新全部插件：npm update [–save-dev]

   2. 查看npm帮助：npm help

   3. 当前目录已安装插件：npm list

安装gulp(全局)

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

配置项目

下面以一个简单案例来做演示：创一个gulp文件夹作为项目根目录，项目结构如下：
我们以常用的 gulp-uglify、gulp-concat、gulp-minify-css为例。
先是配置package.json文件，有三种方法：
1. 可以用记事本之类的创建一个
2. 用npm init创建(npm init会自动生成)
3. 也可以复制之前项目的创建好的package.json

本地安装gulp及gulp插件

本地安装gulp

npm install gulp –save-dev（加上–save-dev会把描述自动写入在package.json中）

安装完成后

gulp模块下载到项目中的node_modules文件夹中。

package.json中写入了devDependencies字段，并在该字段下填充了gulp模块名

本地安装gulp插件

接下来安装上面提到的三个插件,在终端中输入

npm install –save-dev gulp-uglify gulp-concat gulp-minify-css

创建gulpfile.js文件

在项目根目录下创建gulpfile.js文件，然后编写如下代码

/引入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 任务名称

gulp minify-css
运行结果：在dist/css/目录下生成了我们压缩后的css文件。

ps一直在控制台输入命令比较麻烦，可以在PHPstorm和webstorm中直接运行