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

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

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

打开根目录下的app文件夹
学习装配gulp前端自动化工具步骤流程
学习装配gulp前端自动化工具步骤流程
找到index.html文件
学习装配gulp前端自动化工具步骤流程
学习装配gulp前端自动化工具步骤流程

我们修改如下:
学习装配gulp前端自动化工具步骤流程
学习装配gulp前端自动化工具步骤流程

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

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

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

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