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

首先,安装所需要的插件 yo  bower gulp三个工具
   
 npm install -g yo bower gulp
学习安装gulp前端自动化工具步骤流程_第1张图片
再次,安装gulp所需要的generator-gulp-webapp,这个和grunt的有个区别就多了一个gulp标识
 npm install -g generator-gulp-webapp
学习安装gulp前端自动化工具步骤流程_第2张图片
最后一步安装gulp-webapp,注意要和grunt区分开来
yo gulp-webapp
学习安装gulp前端自动化工具步骤流程_第3张图片

执行完上面的步骤后,输入  gulp server后,会自动打一个浏览器窗口,如果未打开可以在浏览器中输入( http://localhost:9001
学习安装gulp前端自动化工具步骤流程_第4张图片
打开后的页面内容部分截图:
学习安装gulp前端自动化工具步骤流程_第5张图片
看到打开后的页面说明gulp的开发环境安装好了,那么我们来做一个小小测试吧!

打开根目录下的app文件夹
学习安装gulp前端自动化工具步骤流程_第6张图片
找到index.html文件
学习安装gulp前端自动化工具步骤流程_第7张图片

我们修改如下:
学习安装gulp前端自动化工具步骤流程_第8张图片

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

这时我们看一下刚才在浏览器中打开的页面上有什么变化?
学习安装gulp前端自动化工具步骤流程_第9张图片

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

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

你可能感兴趣的:(学习安装gulp前端自动化工具步骤流程)