Gulp入门安装及运行gulp

转自：https://blog.csdn.net/huang084735/article/details/78564496

 

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

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

附件含有gulpfile.js

 

安装流程：

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

            -g：全局安装;

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

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

 

一，安装的NodeJS

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

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

 

二，全局安装咕嘟咕嘟

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

        查看是否安装成功：命令提示符输入 - >一饮而尽-V 

 

三，新建的package.json文件

      1.创建一个名称为测试项目;

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 

           名称：项目名称（填写）

           varsion：项目版本（填写）

           描述：项目描述（填写）

 

四，本地安装咕嘟咕嘟

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

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

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

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

 

五，本地安装咕嘟咕嘟插件

        注意： 

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

        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文件的代码;

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

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

       

        </div>
            </div>

        </article>