Gulp入门安装及运行gulp

Gulp 是一个自动化工具 - 通常称构建工具

Gulp插件大全：http://www.cnblogs.com/-ding/p/5972162.html 

附件含有gulpfile.js

安装流程：

注意：下面安装环境都是在命令提示符；window -> 运行 -> cmd

            -g：全局安装；

            --save：将保存配置信息至package.json；

           -dev : 保存至package.json的devDependencies节点 ;

一、安装nodejs

        安装：nodejs官网绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。然后傻瓜式安装。

       查看是否安装成功：命令提示符输入-> node -v 与 npm -v（npm是在安装nodejs同时安装的nodejs包管理器）

二、全局安装Gulp

        安装：命令提示符执行npm install gulp -g 

        查看是否安装成功：命令提示符输入->gulp-v 

三、新建package.json文件

      1.创建一个名称为test项目；

cd F
mkdir test
cd test
mkdir dev
cd dev
mkdir test
cd test
mkdir css sass js image
cd.>index.html 
cd sass 
cd.> style.scss

        2.新建：命令提示符执行npm init 

           name:项目名称 （填写）

           varsion：项目版本（填写）

           description：项目描述（填写）

四、本地安装Gulp

        1.路径转向指定项目文件: cd D:\test

        2.安装：命令提示符执行npm install gulp --save-dev 

       查看是否安装成功：项目文件中生成 node_modules 文件

       全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能

五、本地安装Gulp插件

        注意： 

        1.首先安装-> npm install jshint@2.x 防止红字报错jshint@2.x则(其他文件不存在也需要安装)

        2.路径转向指定项目文件: cd D:\test

        3.安装：命令提示符执行npm install gulp-concat gulp-renamegulp-jshint  gulp-compass   gulp-html-minify   gulp-clean-css   

              gulp-uglify   gulp-imagemin   gulp-tinypng-nokey   gulp-rev   gulp-rev-collector   --save-dev 

               查看是否安装成功：查看package.json；

六、新建gulpfile文件 并 执行 gulp

         参考笔记里面有gulpfile文件CODE；

         路径转向指定项目文件: cd D:\test

         执行Gulp：命令提示符执行 all 、default  、 gulp  ->分别为运行对应的任务（gulpfile.js的为例）