Gulp构建前端自动化项目

类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器。

下面是项目的效果:

另一个页面:

要求:

  • Node.js
  • gulp.js
  • bower

下载项目代码于本地,

进入该目录,执行如下命令:

1 cd my-demo2 npm install
3 bower install

安装完成之后,运行如下命令:

1 gulp

现在项目已经跑起来了,所有在src目录下的文件都会编译生成相应的文件,并存入build文件夹下,同时,src目录下的文件发生变化时,会新生成相应的文件,并且已经启动服务器-在localhost:3000/或者:http://172.18.68.146:3000/下查看效果。

 

项目代码下载:Qboooogle

时间: 2024-08-03 22:24:03

Gulp构建前端自动化项目的相关文章

Gulp构建前端自动化工作流之:常用插件介绍及使用

在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及使用方法(Tasks and dependencies) 3. 扩展优化(Extend & Optimize Task) 4. 其他插件介绍(Other plug-ins) 5. 匹配规则(Match Files) 6. 注意事项(Attention) 关于Gulp的入门介绍及安装方法,可先去 <

[转]gulp构建前端工程

摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似G

在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建

刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具牛逼闪闪的livereload功能并不是那么的轻易,因为我们必须还得调教它们去调用Java容器.现在全球社区似乎还没有成熟的插件可以自动帮我们调教Java容器,百度Fis的Jello也只是做了一下velocity的自动化,自己写感觉就是自虐,所以在这个问题上倒不如把Gulp当成一个Maven来使用,反正J2EE开发人员应该大都习惯了修改代码之后漫长无尽的build.相反,如果对Gulp

基于gulp 的前端自动化构建方案总结

先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.org 然后就可以用 cnpm命令从淘宝镜像获取插件包了:当然,你这时候依旧可以用npm命令从官方服务获取插件包. cnpm支持除 publish 之外的原生 npm 所有命令. 1,新建文件夹 gulp 2,切换到gulp目录下,执行 cnpm init,填写相关信息,生成package.json文件: 3,配

# 流行框架第一天:构建前端自动化工作流环境

## 兩個問題 ## 学习目标 - 了解什么是Node,什么是NPM:(Node.js) - 掌握Bower的使用: - 熟练使用Less/Sass: - 搭建一个自己的自动化工作流环境: + 自动编译 + 自动合并 + 自动刷新 + 自动部署 - GIT 与 GITHUB + master 托管源文件 + gh-pages 托管部署文件 + 在github搭建自己的blog ## 为什么要有自动化的流程 - 在我们的开发过程中有大量的重复操作 - DRY Don't repeat yourse

【gulp】前端自动化工具---gulp的使用(一)------【凡尘】

什么是gulp?   基于node的自动化构建工具 扩展:开发的时候分为2个节点一个是开发阶段  另一个是部署阶段 开发阶段:源文件不会被压缩 部署阶段:所有文件需要压缩 002.gulp能干什么? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 ........... 003.怎么安装gulp? 因为它基于nodeJS,因此需要先安装node环境 安装完成后,打开你的命令行窗口 输入: node -v 检测

基于gulp的前端自动化方案

前言 ? 最近几年前端技术发展日新月异,特别是单页应用的普及.组件化.工程化.自动化成了前端发展的趋势.webpack已经成为了前端打包构建的主流,但是一些老古董的项目还是存在的,也有优化的必要,正好公司的老项目需要优化,不多说拿gulp实践一下. 本文需要安装node(自行安装),并了解过gulp入门.gulp脚本下载:https://github.com/youhunwl/gulp 欢迎star. 实践 创建项目目录 首先初始化npm依赖项与基本信息,使用命令npm init一直回车,生成p

gulp/webpack 前端自动化工具

gulp 基于node的自动化构建工具 开发的时候分为2个阶段 开发阶段:源文件进行开发 部署阶段:源文件会被压缩,合并,优化. gulp的用处? 1  自动压缩JS文件 2  自动压缩CSS文件 3  自动合并文件 4  自动编译sass 5  自动压缩图片 6  自动刷新浏览器 安装gulp. 原文地址:https://www.cnblogs.com/lianqing/p/9072642.html

Node.js+Yeoman构建前端自动化Web应用

Yeoman的诞生,旨在为开发者提供一系列健壮的工具.程序库和工作流,帮助他们快速构建出漂亮.引人注目的Web应用.Yeoman包含了yo.grunt.bower三个部分,分别用于项目的启动.文件操作.包管理.官网做了详细的介绍:http://yeoman.io/ yo.grunt.bower的安装都必须通过Node.js才能安装,到Node.js官网https://nodejs.org/下载相应版本的安装包,本次测试环境为Windows7 64位,按提示默认安装即可.安装完成,在C盘创建了一个