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

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

         执行Gulp:命令提示符执行all,default,gulp - >分别为运行对应的任务(gulpfile.js的为例)

       

        </div>
            </div>

        </article>

猜你喜欢

转载自blog.csdn.net/loooody/article/details/81252185