转自: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.创建一个名称为测试项目;
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
名称:项目名称(填写)
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>