设为首页 收藏本站
查看: 912|回复: 0

[经验分享] 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)

[复制链接]

尚未签到

发表于 2017-2-23 08:53:17 | 显示全部楼层 |阅读模式
  相关连接导航
  在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一)
  执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)
  常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
  构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)


一、准备工作
  1、什么是 npm?
  npm 是 nodejs 的包管理工具,主要功能就是管理、更新、搜索、发布node的包。Gulp 就是通过 NPM 安装的。关于 NPM 中文介绍,这里有一篇非常不错的文章:http://www.cnblogs.com/chyingp/p/npm.html
  完整的 NPM 文档请看这里 :https://docs.npmjs.com
  2、安装 Node.js 并升级 NPM 到最新版本
  nodejs 安装:打开 nodejs.org 下载 nodejs 安装包,并根据提示安装,这里不做赘述。
  npm 升级:当安装完 nodejs 后,npm 就已经可用,打开命令行执行 npm -v 如果正确显示版本号,则说明安装没有问题。由于npm的更新速度比nodejs 要快,所以输入 npm install npm -g 升级npm 。
  3、gitbash
  windows 下的命令行工具 CMD 实在难用,这里推荐一个替代方案,建议安装 gitbash 。反正少不了使用 GIT ,只需在安装 GIT 时选择 gitbash 组件即可。GIT 的安装这里也不做太多说明,有疑问的可以在回复中提问。

  4、什么是 gulp
  gulp 官方的介绍是 用自动化构建工具增强你的工作流程! ——  Automate and enhance your workflow!其有着易于使用、构建快速、高质量插件丰富、易于学习等众多优势。下一节中会仔细讨论和领略 gulp 的风采!

二、安装 gulp
  千呼万唤始出来,终于到 gulp 登场的时候了。如果你已经对前面的三个步骤感到疲倦,那么安装 gulp 这一步就是让你稍作休息的绝佳时机。 Gulp 的开发团队将其安装过程做的相当完美,不需要复杂的配置,不需要漫长的等待。  废话不说,进入正题:
  首先,打开 gitbash 这个利器,找一个位置,创建并进入一个项目文件夹,并输入下列命令来完成 gulp 的安装。



全局安装请执行
$ npm install --global gulp
在项目目录安装请输入
$ npm install --save-dev gulp
  然后,创建一个名为 gulpfile.js 的配置文件在当前目录下,并输入下面的代码,这里创建了一个空的任务(仅作为用于测试gulp是否正常工作)



var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
  最后,执行 $ gulp运行gulp,如果正确输出类似下面的信息,则说明gulp 已经正确安装并运行。



$ gulp
[11:13:17] Using gulpfile xxx\gulpfile.js
[11:13:17] Starting 'default'...
[11:13:17] Finished 'default' after 44 μs
$_
  至此,gulp 就已经安装完毕,下面要做的就是熟悉如何使用gulp,以及其周边生态。

写在后面
  关于本文如果您有任何建议或疑问请在下面留言交流,也可通过 Web前端高级工程师 群进行线上沟通。
DSC0000.png

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.iyunv.com/thread-345924-1-1.html 上篇帖子: 使用FPM快速生成RPM包 下篇帖子: 【原创】windows下搭建vue开发环境+IIS部署
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表