xshow-2. 使用HTML 5 Boilerplate构建前端

xshow-使用HTML 5 Boilerplate构建前端

方法一：使用Aptana Studio构建，如下

方法二：使用git下载

git clone https://github.com/h5bp/html5-boilerplate.git

方法三：直接从官网下载最新版本

https://html5boilerplate.com/

安装Aptana Studio 3

下载最新版本的Aptana Studio，当然其他类似的IDE也可以，看个人喜好

创建项目xshow

选择HTML5 Boilerplate Template，需要网络支持下载依赖

也可以选择HTML5 Boilerplate(Cached)，使用这个模板构建不需要网络

生成的目录树

整体目录树

dist目录

css目录

doc目录

js目录

src目录

test目录

时间： 2024-10-03 00:23:46

xshow-2. 使用HTML 5 Boilerplate构建前端的相关文章

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安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev

构建前端用户系统之登录退出

前端页面中难免会有一些静态HTML文件, 这时就会遇到用户状态的判断问题, 于是想到使用js的ajax请求来处理整个前端用户相关的东东...版本一 思路是在页面中指定位置预留一个js钩子, 然后在页面加载完成后向后端发送ajax请求, 判断用户是否登录, 并写到钩子里相应文本. 于是版本一产生了... (function($){ var user = window.user = {}; // 用户数据 user.data = {}; // 用户状态, 0未登录, 非0则视为已登录, 可扩展为用户

Grunt Bower构建前端

Grunt + Bower-前端构建利器 目前比较流行的WEB开发的趋势是前后端分离.前端采用重量级的Javascript框架,比如Angular,Ember等,后端采用restful API的Web Service服务,通过JSON格式进行数据交互. 对于后端服务语言来说,不论是Ruby的rake,Java中的Maven或Gradle,或是Scala中的SBT,他们都能够提供编译运行.运行测试.打包部署.依赖管理等功能.再加上强大的package系统,让它可以插拔式的使用很多强大的功能,像数据

用gulp替代fekit构建前端项目

https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反,fekit帮我们做了很多事情,还屏蔽了许多细节,让开发人员能够专注于开发过程.不过随着fekit的升级,也出现了一些问题,同时fekit和公司业务及发布流程有一定耦合,所以觉得采用开源的构建方案. 在使用gulp的过程中,基本也是依据使用fekit的思路来逐步完善构建过程的,所以还是要感谢fekit

Gulp安装及配合组件构建前端开发一体化

所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev # 局部安装 全局安装 1. 将安装包放在

gulp+webpack构建前端项目

本文将介绍如何利用gulp+webpack构建一个基本的前端项目.假设你已经安装了node环境并且会使用简单的命令行 1.gulp安装 (1)全局安装 npm install gulp -g (2)查看gulp是否安装成功 gulp -v (3)进入本地目录,新建gulpfile.js 2.安装gulp-webpack插件 基于gulp的插件非常多,建议大家查看npm官网https://www.npmjs.com (1)安装 webpack的用途主要是模块化+打包.安装敲入命令 npm inst

[转]gulp构建前端工程

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

使用 gulp-file-include 构建前端静态页面

前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能和后台模板一样,将导航.页头.页脚等公用的部分分离出去,然后引入页面中.单纯的静态页面不具备这种功能,而使用 gulp 插件可以很容易的完成,比如 gulp-file-include 插件. 官网对于插件的基本使用已经说得很详细,但是对于一些具体的场景并没有举例,所以初次接触还是还是会有疑惑,比如具