码迷,mamicode.com
首页 > 其他好文 > 详细

学习安装gulp前端自动化工具步骤流程

时间:2015-11-11 17:56:48      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:

首先,安装所需要的插件 yo  bower gulp三个工具
   
 npm install -g yo bower gulp
技术分享
技术分享
再次,安装gulp所需要的generator-gulp-webapp,这个和grunt的有个区别就多了一个gulp标识
 npm install -g generator-gulp-webapp
技术分享
最后一步安装gulp-webapp,注意要和grunt区分开来
yo gulp-webapp
技术分享

执行完上面的步骤后,输入 gulp server后,会自动打一个浏览器窗口,如果未打开可以在浏览器中输入http://localhost:9001
技术分享
技术分享
打开后的页面内容部分截图:
技术分享
技术分享
看到打开后的页面说明gulp的开发环境安装好了,那么我们来做一个小小测试吧!

打开根目录下的app文件夹
技术分享
技术分享
找到index.html文件
技术分享
技术分享

我们修改如下:
技术分享
技术分享

把原来的‘Allo, ‘Allo!改成 Gulp, Gulp!

这时我们看一下刚才在浏览器中打开的页面上有什么变化?
技术分享
技术分享

好了,这时我们的Gulp安装测试已经完成了。赶快动手试试吧!

分享不了太深的技术东东,只能分享一些肤浅的技术东东,千里之行,始于足下,希望走好第一步。

学习安装gulp前端自动化工具步骤流程

标签:

原文地址:http://blog.csdn.net/itpinpai/article/details/49783501

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!