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

Gulp安装使用
1. 安装nodeJS
下载：www.nodejs.org 安装
安装完成，测试安装结果
 node -v 查看安装的node版本
 npm -v 查看安装的npm版本

1. 创建并初始化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项目描述文件
   初始化的时候，项目描述文件中，可以什么都不用写，直接默认即可。

2. 安装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

1. 安装好插件之后，观察项目文件夹下的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”
   }
   }