关于gulp的安装和使用的方法

Gulp安装使用

1. 安装nodeJS

下载：www.nodejs.org 安装

安装完成，测试安装结果

 node -v 查看安装的node版本

 npm -v 查看安装的npm版本

创建并初始化node项目

在我们已经的所在的项目中建立我们需要的文件夹（这些我们在初始化node项目中就已经建好）

例子：建一个gulp文件夹然后里面放我们需要的文件夹（也可以在gulp里面建一个project文件夹来放所文件）

1， js文件夹。

2，css文件夹

3，image文件夹

4，html页面（和上面的文件夹是同一目录）

5，disk（里面一样有我们在做项目中所需要建的文件夹css，js等这里面的文件使我们把压缩好的文件存放的位置）。

6，见一个js文件名gulpfile（这里是我要写压缩文件的js文件也是和上面同一目录）里面的内容如下

（导入输入的插件

var _gulp=require(“gulp”);//导入一个gulp插件

var _gulpHtmlmin=require(“gulp-htmlmin”);//导入一个html插件

var _gulpCssmin=require(“gulp-minify-css”);//导入一个css插件

var _gulpJsmin = require(“gulp-uglify”);//导入一个js插件

var _gulpImagemin = require(“gulp-imagemin”);//导入图片压缩插件

创建任务

第一个参数：任务名称

第二个参数：任务处理的函数

_gulp.task(“cssmin”,function(){

_gulp.src(“./css/*.css”)// src:表示要处理的文件或者路径

.pipe(_gulpCssmin())// 调用插件执行插件的功能

.pipe(_gulp.dest(“./disk/css/”));// 输出到指定的文件夹下

});

_gulp.task(“js”,function(){

_gulp.src(“./js/*.js”)

.pipe(_gulpJsmin())//调用插件执行插件的功能

.pipe(_gulp.dest(“./disk/js/”));//输出到指定的文件夹下面

});）

（我们在调用的时候只需要在window（window r打开命令）命令框中用gulp插件调用任务名称即 –例如gulp cssmin即可）

//////////////////////////////////////////////////////////////

 创建一个普通项目

 命令行进入项目根目录，执行npm init命令

npm: node package manager :node包管理器

init:初始化

npm init:初始化node项目，生成package.json项目描述文件

初始化的时候，项目描述文件中，可以什么都不用写，直接默认即可。

安装gulp插件，和项目中的gulp支持

安装gulp插件

命令行执行如下命令

npm install -g gulp

安装项目中的gulp依赖

命令行进入当前项目中，安装gulp支持

cd %project_directory%

npm install gulp –save-dev

安装项目中使用的gulp插件

安装图片压缩插件

npm install gulp-imagemin –save-dev

安装js压缩插件

npm install gulp-uglify –save-dev

安装css压缩插件

npm install gulp-minify-css –save-dev

安装html压缩插件

npm install gulp-htmlmin –save-dev

安装好插件之后，观察项目文件夹下的gulpfile.js文件

{

“name”: “project01”,

“version”: “1.0.0”,

“description”: “这是第一个node项目，通过npm init创建”,

“main”: “index.js”,

“scripts”: {

“test”: “echo \”Error: no test specified\” && exit 1”

},

“author”: “laomu”,

“license”: “ISC”,

“devDependencies”: {

“gulp”: “^3.9.1”,

“gulp-htmlmin”: “^3.0.0”,

“gulp-imagemin”: “^3.1.1”,

“gulp-minify-css”: “^1.2.4”,

“gulp-uglify”: “^2.0.0”

}

}