【前端】前端环境的配置与安装

  需要安装环境,查了一些资料都不是很齐全。在这里把自己中途东西用到的都总结起来。


目录

  • 前端开发环境安装与配置
    •  
      • 目录
    • 软件安装
      • Nodejs
      • Sublime Text 3
      • Sublime Text 插件
      • Git客户端
      • IIS WEB服务器
    • IDE配置
      • 安装Gulp
      • 安装Bower
      • 配置开发依赖包路径
      • 配置批处理任务
    • 开发环境配置

前端开发,我们主要使用Angular JS框架来开发JavaScript代码,CSS样式表我们使用Less进行开发,而开发环境则使用Gulp进行包管理和批处理编译。

软件安装


Node.js

去官网下载并安装, https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi (若是Mac/Linux,选择对应版本下载) 
安装在任意目录下,安装好之后运行Node.js command prompt,输入node -v 命令,显示node.js版本号即安装成功

Sublime Text 3

去官网下载并安装,http://www.sublimetext.com/3 ,安装完成后自行搜索激活码激活即可

Sublime Text 插件

使用Package Control组件安装 
1、按 Ctrl + ` 调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音) 
2、输入以下代码并回车

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) );open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/'+ pf.replace(' ','%20')).read())

  • 1
  • 2

3、 重新启动Sublime Text 3 
4、若在Perferences->package settings中看到package control这一项,则表示安装成功。 
5、按下Ctrl + Shift + P调出命令板 
6、输入install调出Install Package选项并回车,然后在列表中选择需要的插件进行安装

建议安装以下插件 
Angula JS : AngulaJS代码提示 
Doc Blockr:注释生成器,当我们使用/**的时候会自动加入注释模板 
Emmet:HTML快速开发插件 
Side Bar:左侧栏 
Convert To UTF-8:当我们打开非UTF-8的文档的时候,会自动转换成UTF-8 
HTML/CSS/JS Prettify:代码格式化插件

Git客户端

官网下载并安装,https://git-scm.com/download/win

IIS WEB服务器

这是Windows系统自带的,安装与配置方法参考http://jingyan.baidu.com/article/eb9f7b6d8410ab869364e835.html


IDE配置


安装Gulp

安装Gulp之前,先把npm升级到最新版本(npm是Node.js的包管理工具,在Node.js安装的同时已经被安装了,可以直接使用npm命令)

打开Node.js command prompt,输入命令npm install npm -g

接着配置npm的全局路径 
Windows下的Nodejs npm路径是appdata,可能不是我们想要的路径,可以改成我们指定的路径方便管理。 
在cmd下执行以下命令 
npm config set cache “X:\xxxxx\node_cache” 
npm config set prefix “X:\xxxxx\node_global” 
如果命令无效,可以去nodejs的安装目录中找到node_modules\npm\npmrc文件,这个文件存放npm的userconfig配置。 
修改如下即可: 
prefix = X:\xxxxx\node_global 
cache = X:\xxxxx\ node_cache

建议配置在node.js的安装路径下,(我的node.js安装在E:\web-dev\node.js,后续内容都发生在此路径或者E:\web-dev下)

在E:\web-dev 下新建个文件夹,任意取名,这个文件夹即开发工程根目录(我取名为learning) 
1、全局安装 
打开Node.js command prompt,进入learning路径,输入命令npm install -g gulp 
安装完毕后输入gulp -v,如果提示不是内部或外部命令,说明没有配置系统变量path,手动去配置pasth,地址是prefix的地址。

2、本地安装 
输入命令npm init,初始化Node环境,根据实际情况填写内容 
输入命令npm install gulp -save-dev

3、安装gulp相关插件 
首先安装 npm install –save-dev gulp-load-plugins 
后面选择自己需要的安装,这里我安装了以下插件

  • npm install –save-dev gulp-rename 用来重命名文件流中的文件
  • npm install –save-dev gulp-uglify 用来压缩js文件,使用的是uglify引擎
  • npm install –save-dev gulp-minify-css 要压缩css文件时可以使用该插件
  • npm install –save-dev gulp-minify-html 用来压缩html文件
  • npm install –save-dev gulp-jshint 用来检查js代码
  • npm install –save-dev jshint 安装了gulp-jshint,一定要同时安装jshint
  • npm install –save-dev gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了
  • npm install –save-dev gulp-less less使用gulp-less
  • npm install –save-dev gulp-sass sass使用gulp-sass
  • npm install –save-dev gulp-imagemin gulp-imagemin插件来压缩jpg、png、gif等图片
  • npm install –save-dev gulp-livereload 当代码变化时,它可以帮我们自动刷新页面 
    该插件最好配合谷歌浏览器来使用,且要安装livereload chrome extension扩展插件
  • npm install –save-dev gulp-htmlhint 校验HTML语法
  • npm install –save-dev gulp-sourcemaps CSS Source Map生成
  • npm install –save-dev gulp-notify 通知栏(出错后会在Windows右下方提示错误)
  • npm install –save-dev gulp-plumber 错误处理兼容

插件安装完毕后在工程根目录下的package.json文件里能看到,如图 

安装Bower

首先初始化Bower配置文件,进入learning路径(E:\web-dev\learning),输入命令bower init即可,和gulp的init类似,按实际情况填写,其中有4个问题提示,分别输入y、y、n、y。

输入命令安装Bower: npm install bower -g

注:Bower的作用主要是管理我们需要的开发包,例如Angula JS、jQuery等等。

配置开发依赖包路径

Bower的作用是来管理开发包,所以需要对开发包的路径做个配置 
在根路径下建一个.bowerrc文件,并写入内容,如图所示 

配置批处理任务

此时需要把工程目录创建好,工程目录如图 
 
其中dist目录下存放的是最终编译生成的文件,src目录下存放的是开发编辑的文件

在根路径下(E:\web-dev\learning)新建个js文件,gulpfile.js,文件内容如图 

在命令行下执行命令 gulp,不输出错误信息以及一直处于等待状态即为配置成功

后续在src下的js、css里编写完代码后,在根路径命令行下执行gulp命令,在dist下的js、css里会生成对应的编译文件

 

开发环境配置


在这里实际上就是使用Bower来安装开发包

打开Node.js command prompt,进入工程根路径(E:\web-dev\learning),安装所需要的开发包,我安装的开发包如下

  • bower install –save angularjs
  • bower install –save angular-animate
  • bower install –save echarts
  • bower install –save jquery
  • bower install –save sparkline
  • bower install –save ng-stomp

至此,前端环境已安装配置完毕,可根据自己需要修改工程的开发目录

你可能感兴趣的:(【前端】前端环境的配置与安装)