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项目；

1. cd F
2. mkdir test
3. cd test
4. mkdir dev
5. cd dev
6. mkdir test
7. cd test
8. mkdir css sass js image
9. cd.>index.html
10. cd sass 
11. 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 [email protected]  防止红字报错[email protected]则 (其他文件不存在也需要安装)

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

        3. 安装：命令提示符执行 npm install  gulp-concat gulp-rename gulp-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的为例）