创建 Web 前端开发环境

Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础。

本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt。

1. 安装 NodeJS 和 NPM

一切从 NodeJS 开始吧,官方网址:https://nodejs.org/

NodeJS 既可以为我们提供一个服务器端的 Web 环境,又可以提供一个命令行的工具,既然做 Web 前端开发,那就是我们必然选择的工具了。

为了解决包管理的问题,NodeJS 自己搞了一个包管理工具,你可以看成是 Visual Studio 中的 Nugut 就好了。不过,这个工具太好用了,现在自己已经自立门户,所以,你也可以单独安装它。

NPM 官方网址:https://www.npmjs.com

有的时候,在国内访问 NPM 不太方便,原因你懂得,淘宝在国内架设了一个 CNPM 服务器,帮我们同步 NPM 中的模块,这个 CNPM 的地址为:http://npm.taobao.org,淘宝大法好。

具体如何配置 Node.js 和 NPM,我已经整理过一篇 配置 node.js 环境,可以用来参考。

地址:http://www.cnblogs.com/haogj/p/3969536.html

使用 npm 的 init 命令可以直接交互式创建一个 NodeJS 的项目文件 package.json.

PS C:\Study\framework> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (framework)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Study\framework\package.json:

{
  "name": "framework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-jshint": "^0.11.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes)

这时候,当前目录下,会出现一个名为 package.json 的 NodeJS ,或者说是 NPM 的项目模板。

2. 安装 Bower

NPM 可以管理 node.js 的模块,可以,我们准备做 Web 前端开发,现在的目标不是 node.js 的服务器端开发,所以,我们更加需要在浏览器上使用的 javascript 模块,这就不能全靠 NPM 了,Bower 是一个 Web 前端模块的包管理工具,有了它,我们就不必到各个网站去找各种前端模块,比如 jquery,bootstrap 等等,直接使用这个工具就可以搞定了。按照官方说法:Bower manages all these things for you.

Bower 的图标是一只小鸟,很漂亮。查了一下,它叫园丁鸟,鸟类的建筑大师,雄鸟在求偶期会用树枝筑拱门或亭子,鸟中的工匠呀。

官网地址:http://bower.io,你也可以在 GitHub 上找到它:https://github.com/bower/bower

安装 bower 需要使用 NPM,命令很简单。

$ npm install -g bower

安装之后,可以直接使用 bower 命令来管理。下面是使用说明。

PS C:\Study\framework> bower

Usage:

    bower <command> [<args>] [<options>]
Commands:

    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages - and possible updates
    login                   Authenticate with GitHub and store credentials
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
    unregister              Remove a package from the registry
    version                 Bump a package version
Options:

    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --log-level         What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
    -v, --version           Output Bower version
    --no-color              Disable colors
See ‘bower help <command>‘ for more information on a specific command.
PS C:\Study\framework>

bower 会将管理的包保存到 bower_components/ 目录下面。

使用 init 进行初始化。

PS C:\Study\framework> bower init
? name: framework
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose? amd
? keywords:
? authors:
? license: MIT
? homepage:
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
{
  name: ‘framework‘,
  version: ‘0.0.0‘,
  moduleType: [
    ‘amd‘
  ],
  license: ‘MIT‘,
  ignore: [
    ‘**/.*‘,
    ‘node_modules‘,
    ‘bower_components‘,
    ‘test‘,
    ‘tests‘
  ]
}

? Looks good? Yes

可以看到帮助创建的 bower.json 配置文件的内容。

使用 bower 获取前端库很方便,命令类似与 NPM

PS C:\Study\framework> bower install jquery
bower jquery#*                  cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#*                validate 2.1.4 against git://github.com/jquery/jquery.git#*
bower jquery#~2.1.4            install jquery#2.1.4

jquery#2.1.4 bower_components\jquery
PS C:\Study\framework> bower install angularjs
bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.4.5
bower angularjs#*             validate 1.4.5 against git://github.com/angular/bower-angular.git#*
bower angular#~1.4.5           install angular#1.4.5

angular#1.4.5 bower_components\angular
PS C:\Study\framework> bower install bootstrap
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower bootstrap#~3.3.5         install bootstrap#3.3.5

bootstrap#3.3.5 bower_components\bootstrap
└── jquery#2.1.4

当前目录下会增加一个 bower_components 文件夹,包含获取的前端包。不过你不能获取 kendoUI 的库,这是一个商业项目。

bower 工作的时候需要 node, npm 和 git.

还没有 git ?先等一下,我们再来一个工具 git。

3. 安装 git

如果你不知道 git ,总该听说过 GitHub 吧,就是这只小黑猫  。不过,我们这里说的是 git ,而不是 GitHub。

Git是一个分布式的版本控制系统,最初由 Linus Torvalds 编写,Torvalds 着手开发 Git 是为了作为一种过渡方案来替代 BitKeeper,后者之前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人觉得 BitKeeper 的许可证并不适合开放源码社区的工作,因此 Torvalds 决定着手研究许可证更为灵活的版本控制系统。

后来 Git 在其它项目中也取得了很大成功。GitHub 是使用 git 技术的一个代码托管网站,提供基于 Web 的访问界面。是目前最为流行的源代码管理网站。

Git 官网地址:http://www.git-scm.com

Git 下载地址:http://www.git-scm.com/downloads

安装非常简单,Windows 版本下载之后,会得到一个安装程序,直接安装就可以。

在命令行直接执行 git 可以得到帮助说明。

PS C:\Study\framework> git
usage: git [--version] [--help] [-C <path>] [-c name=value]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

These are common Git commands used in various situations:

start a working area (see also: git help tutorial)
   clone      Clone a repository into a new directory
   init       Create an empty Git repository or reinitialize an existing one

work on the current change (see also: git help everyday)
   add        Add file contents to the index
   mv         Move or rename a file, a directory, or a symlink
   reset      Reset current HEAD to the specified state
   rm         Remove files from the working tree and from the index

examine the history and state (see also: git help revisions)
   bisect     Find by binary search the change that introduced a bug
   grep       Print lines matching a pattern
   log        Show commit logs
   show       Show various types of objects
   status     Show the working tree status

grow, mark and tweak your common history
   branch     List, create, or delete branches
   checkout   Switch branches or restore working tree files
   commit     Record changes to the repository
   diff       Show changes between commits, commit and working tree, etc
   merge      Join two or more development histories together
   rebase     Forward-port local commits to the updated upstream head
   tag        Create, list, delete or verify a tag object signed with GPG

collaborate (see also: git help workflows)
   fetch      Download objects and refs from another repository
   pull       Fetch from and integrate with another repository or a local branch
   push       Update remote refs along with associated objects

‘git help -a‘ and ‘git help -g‘ list available subcommands and some
concept guides. See ‘git help <command>‘ or ‘git help <concept>‘
to read about a specific subcommand or concept.

在前端开发过程中,我们不用直接使用 git,有的时候 bower 会自动调用 git 来获取代码。

4. 安装 Grunt

对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化 Grunt 工具可以减轻你的劳动,简化你的工作。

官网地址:http://gruntjs.com

中文地址:http://www.gruntjs.net

Grunt和 Grunt 插件是通过 npm 安装并管理的。

详细的说明可以从 这里开始

在安装 Grunt 前,请确保当前环境中所安装的 npm 已经是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能需要 sudo 指令)。

如果你已经安装了 Grunt,现在需要参考一些文档手册,那就请看一看 Gruntfile 实例 和如何 配置任务吧。

安装 CLI

在继续学习前,你需要先将Grunt命令行(CLI)安装到全局环境中。安装时可能需要使用sudo(针对OSX、*nix、BSD等系统中)权限或者作为管理员(对于Windows环境)来执行以下命令。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

显示 Grunt 版本,注意是大写的 V,小写的 v 就是另外一个意思了。

>grunt -V
grunt-cli v0.1.13
grunt v0.4.5

Grunt 使用的项目文件称为 Gruntfile.js。如果还没有 Gruntfile.js 文件,直接执行 grunt,会看到如下的提示信息。

PS C:\Study\framework> grunt
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you‘re seeing this message, either a Gruntfile wasn‘t found or grunt
hasn‘t been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

这是说没有在当前目录下找到 grunt 的项目文件。

grunt 的项目文件称为 Gruntfile.js,注意第一个字符可是大写的,在跨平台的时候,这就是一个坑了。

让我们写一个 Grunt 版的 Hello, world 来完成环境的准备。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
      pkg: grunt.file.readJSON(‘package.json‘),
  });

  grunt.registerTask(‘default‘, ‘Hello, world task description.‘, function() {
      grunt.log.writeln(‘Hello, world.‘);
  });

};

这里,我们创建了一个自定义的任务,设置名称为 default,实际执行的时候,会输出 Hello, world.

PS C:\Study\framework> grunt
Running "default" task
Hello, world.

Done, without errors.

就到这里吧。下次再见。

时间: 2024-10-11 07:02:18

创建 Web 前端开发环境的相关文章

Web 前端开发环境

创建 Web 前端开发环境 Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. 1. 安装 NodeJS 和 NPM 一切从 NodeJS 开始吧,官方网址:https://nodejs.org/ NodeJS 既可以为我们提供一个服务器端的 Web 环境,又可以提供一个命令行的工具,既然做 Web 前端开发,那就是我们必然选择的工具了. 为了解决

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

用grunt搭建自动化的web前端开发环境

用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你

用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是可以

【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发者.假设你如今还不知道grunt或者听说过.可是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"反复.表示重点). 至于grunt的作用,这里不具体说了.总之你假设做web前端开发,你一定要用grunt.另一点,它全然免费,没有盗版.既强大又免费的东西.为何不用? 当然了,你假设你能找到更好的替代grunt的其它工具

Grunt搭建自动化web前端开发环境--完整流程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

搭建web前端开发环境

目录: 搭建Web开发环境 1.辅助工具——PS(切图.修图.测量) 2.开发.调试工具——常用开发工具和调试工具的功能介绍和使用方法 内容: 切图设计稿(.pdf文件) ———————————— 产出物(如.png .jpg文件)                          素材切出        为什么切图?                给网页提供图片素材                HTML:img    <img src="images/avatar.jpg"

前端基础入门第一阶段-Web前端开发基础环境配置

Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的行为(包括页面的效果和整合): B.HTML5时代的大前端:要处理各种端的兼容开发(PC,移动端,各种浏览器).移动APP开发和移动站点开发,Ajax+服务器端技术开发,异步开发和后台的交互.高级设计模式和框架(MVC,AngularJS...).运用自动化工作流(Grunt).网站安全.SEO.测

蜗牛学院——web前端开发

------------恢复内容开始------------ 一.第一阶段 专业核心基础 1.第一周 HTML和CSS入门 知识要点: web前端开发环境.HTML常用标签.表单元素.table布局.CSS样式表.DIV+CSS布局 课程目标: 熟练运用HTML和CSS样式属性完成页面的布局和美化,能够仿制任意网站的前端页面实现 2.第二周 CSS3和移动端 知识要点: CSS3选择器.伪类.过渡.变换.动画.字体图标.弹性盒模型.响应式布局.移动端 课程目标 熟练运用CSS3来开发网页.熟练开