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

首先,安装所需要的插件 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安装测试已经完成了。赶快动手试试吧!

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

时间: 2024-08-06 03:45:00

学习安装gulp前端自动化工具步骤流程的相关文章

gulp 前端自动化工具

一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是基于node环境的,那么什么是 node.js呢,下面是官方的解释Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js 的包管理器 npm,是全球最大的开源库生态系统. 用

(转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要修改调整并压缩处理,这时候我们就会用到我们的<前端自动化神器 (Gulp)>,鉴于 gulp 的内容比较多,为了不打乱 Metronic 系列,就单独列了一篇<初探前端自动化神器 (Gulp)>.本文不对 gulp 进行详细阐述,只保留和 Metronic 相关部分. Gulp is

gulp 前端自动化工具的使用&amp;&amp;yarn

1.全局安装gulp          cnpm install gulp -g 2.如果需要使用gulp的时候            a.cnpm init    初始化仓库   后面加 -y b.局部安装   gulp  cnpm install gulp --save-dev --save:将保存配置信息至package.json                              -dev:保存至package.json的devDependencies节点 c.创建一个gulpfi

HTML5技术分享:前端自动化工具推荐

随着前端开发技术的不断发展,前端开发工作也变得越来越复杂,如果能合理地采用一些自动化的工具,生活要容易得多. LiveReload 我目前的开发主力机是一台较早的 13寸 Macbook Pro,外加一台戴尔的显示器.相信做前端开发的都知道,这多出来的一台显示器对工作效率的提升有多大. LiveReload 技术+两块显示屏可以帮你省去重复刷新浏览器这一枯燥的工作.目前实现 LiveReload 的方式很多,如果你倾向于图形化的桌面应用,可以尝试一下 LiveReload.app, 地址是:ht

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe

前端自动化工具 -- fis 使用简介

FIS也是一个新生的前端自动化工具,好下面就来简单介绍一下,真的好简单介绍啊.. 个人觉得FIS已经囊括了一个“大前端”的范畴. 先来看看别人怎么看FIS和Grunt和Gulp F.I.S在实际项目中的应用体验如何? 前端工具里面gulp和fis,有哪些优缺点? FIS和Grunt的区别 FIS入门很简单,提高难度也不大,因为官方已经提供了非常多的文档 围绕着最基本的三条命令 fis install <name> fis release [options] fis server <com

gulp前端自动化入门

一.从零开始搭建gulp前端自动化 1.首先安装nodejs 2.npm init生成package.json 2.定位到当前目录 cd..   d:   我在d盘新建了文件夹gulp 3.npm install --save-dev  安装gulp 4.新建gulpfile.js  需要安装npm install --save-dev gulp-less  | npm install --save-dev gulp-uglify | npm install --save-dev gulp-au

gulp前端自动化构建入门指南(一)

1. 安装node.js 1-1. gulp运行在node环境,需要先安装node.js,建议安装LTS版(稳定版),安装完成后执行两个简单的命令测试是否完全安装,在cmd面板中分别输入node -v.npm -v显示版本号代表正确安装. 1-2. npm是node包管理器,已经随node安装包一起安装,稍后会用到它.由于安装插件需要连接到国外npm服务器,可能会导致连不上或者速度慢,可以使用vpn或者设置代理解决,这里推荐另一种比较简单的解决方法,使用淘宝npm镜像. 在命令行中输入: 1 n

gulp前端自动化构建工具入门篇

现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用? 什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做到以下优点,但是在项目逐渐庞大的时候,采用这个工具,可以提升性能和效率. 为什么要用gulp? 答: 1.js和css属于静态文件,很多时候浏览器存在缓存机制,为了避免缓存带来的误会,可以利用构建工具,给每一个静态文件添加一个版本号,这样浏览器就会认为是新的文件,就不存在缓存机制. 2.性能优化:文件合