前端环境的安装与配置

前端开发环境安装与配置 目录

  • 前端开发环境安装与配置
      • 目录
    • 软件安装
      • 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 = 'Package Control.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())

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
至此,前端环境已安装配置完毕,可根据自己需要修改工程的开发目录

    推荐阅读