Web环境搭建
文章目录
- 欢迎学习Ubuntu搭建Web开发环境
- 1 安装系统（ubuntu16.04LTS）
- 2 检查更新、安装完整语言包
- 3 安装虚拟机
- 4 安装GIT
- 5 Node.js安装
- 6 npm安装
- 7 gulp安装
- 7.1 压缩 JS
- 7.2 压缩 CSS
- 7.3 压缩图片
- 7.4 编译 LESS
- 7.3 编译 Sass
- 8 编译 LESS
- 9 Webpack安装
- 10 Sublime Text3 安装
- 11 Chrome安装
- 12 Gimp安装
- 13 Ruul.Screen ruler
- 14 gedit安装
欢迎学习Ubuntu搭建Web开发环境
1 安装系统（ubuntu16.04LTS）
2 检查更新、安装完整语言包
sudo apt-get updatesudo apt-get upgrade安装完整语言包请点击电脑右上角的系统设置->语言支持，然后根据提示安装
ubuntu报错E:未找到软件包xxx的换源解决办法： https://blog.csdn.net/qq_33485434/article/details/80820163
3 安装虚拟机
(1)终端命令 编辑sources.listsudo gedit /etc/apt/sources.list(2)添加 软件源将下面的地址加入sources.list 的末尾，保存并退出deb http://download.virtualbox.org/virtualbox/debian precise contrib(3)终端命令 导入公钥，并更新源wget -q http://download.virtualbox.org/virtualbox/debian/oracle_vbox.asc -O- | sudo apt-key add -sudo apt-get update(4)终端命令安装（5.0是当前最新版本）方式1 sudo apt-get install virtualbox-5.0 (PS:有时候virtualbox服务器速度不稳定，这一步执行很慢)，可以使用另一种方法）方式2 a. sudo apt-get install dkms libsdl-ttf2.0-0 libvpx1 b. 安装下载好的安装包virtualbox-******~Ubuntu~precise_amd64.deb //双击即可(5)将当前用户添加到 用户组vboxusers，以支持usb. 注：添加完成后要注销后重新登录才会生效sudo usermod -a -G vboxusers ysqPS：ysq为当前电脑用户名，自行修改(6)安装 VirtualBox扩展包，以支持USB2.0等 ,版本要与VirtualBox一致。文件夹中有Oracle_VM_VirtualBox_Extension_Pack-4.3.10-93012.vbox-extpack. 双击安装即可。（右键 Open with other application 选择 Oracle vm virtualbox）安装扩展包之后，找到找到计算机，里面有个 C盘符下面有 add guest选项，点击更新即可调整显示大小(virtualbox和扩展包的版本需一致）(7)新建虚拟系统winxp或win7 a:下载安装notes,foxmail(记得备份替换foxmail7.2/storage/***@sagereal.com) b:下载安装QQ c:安装驱动 Driver_Auto_Installer_EXE_v1.1352.004 安装GIT
a. sudo apt-get install git-core qgitb. git config --global user.name "Your Name"c. git config --global user.email "Your Name@example.com"d. ssh-keygen -t rsa //执行该命令后只需一直按回车即可。最后在~/.ssh目录下会生成id_rsa.pub文件，拷贝这个文件并修改为你的名字拼音.pub，发送给指定同事，等待确认，确认ok好即可使用**git**5 Node.js安装
方式1：二进制包安装：(强烈建议) Nodejs官网提供了编译好的Linux二进制包: http://nodejs.cn/download/ 安装包下载后解压，然后移动或复制到/opt/目录（下载的软件位于该/opt/）： sudo mv node-v8.7.0-linux-x64 /opt/ 创建软链接： sudo ln -s /opt/node-v8.7.0-linux-x64/bin/npm /usr/local/bin/node sudo ln -s /opt/node-v8.7.0-linux-x64/bin/npm /usr/local/bin/npm sudo ln -s /home/liuhanling/Node_new/node-v8.7.0-linux-x64/bin/gulp /usr/bin/gulp方式2：apt-get命令安装： sudo apt-get install nodejs sudo apt-get install npm方式3：源码安装： wget https://nodejs.org/dist/v9.8.0/node-v9.8.0-linux-x64.tar.xz tar xzf node-v9.8.0-linux-x64.tar.xz sudo ./configure make && make install 卸载nodejs和npm： 安装时若有设置node和npm软链接，建议先删除： sudo rm -rf /usr/local/bin/node sudo rm -rf /usr/local/bin/npm sudo apt-get autoremove --purge nodejs sudo apt-get autoremove --purge npm当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
6 npm安装
sudo apt-get install npm npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install npm -g : 升级npm 如果出现以下错误： npm err! Error: connect ECONNREFUSED 127.0.0.1:8087 解决办法为： npm config set proxy null查看安装信息: npm list -g : 查看所有全局安装的模块 npm list grunt : 查看某个模块的版本号 卸载模块: npm uninstall express 更新模块: npm update express 搜索模块: npm search express 创建模块: npm init 在最后输入 "yes" 后会生成 package.json 文件 注册用户: npm adduser 发布模块： npm publish7 gulp安装
sudo cnpm install gulp -g #进行全局安装 cnpm install gulp --save-dev #项目内安装，需要安装到项目中 gulp -v 以确认安装成功7.1 压缩 JS
cnpm install gulp-uglify gulp script创建gulpfile.js：
var gulp = require('gulp'); uglify = require('gulp-uglify') gulp.task('script', function() { // 1\. 找到文件 gulp.src('js/*.js') // 2\. 压缩文件 .pipe(uglify()) // 3\. 另存压缩后的文件 .pipe(gulp.dest('dist/js')) })7.2 压缩 CSS
cnpm install gulp-minify-css gulp css gulp auto gulp创建gulpfile.js：
var minifyCSS = require('gulp-minify-css') gulp.task('css', function () { // 1\. 找到文件 gulp.src('css/*.css') // 2\. 压缩文件 .pipe(minifyCSS()) // 3\. 另存为压缩文件 .pipe(gulp.dest('dist/css')) }) gulp.task('auto', function () { // 监听文件修改，当文件被修改则执行 css 任务 gulp.watch('css/*.css', ['css']) }); // 使用 gulp.task('default') 定义默认任务 // 在命令行使用 gulp 启动 css 任务和 auto 任务 gulp.task('default', ['css', 'auto'])7.3 压缩图片
cnpm install gulp-imagemin7.4 编译 LESS
cnpm install gulp-less7.3 编译 Sass
cnpm install gulp-ruby-sass8 编译 LESS
cnpm install vue -g cnpm install vue-cli -g sudo ln -s /opt/node-v8.7.0-linux-x64/bin/vue /usr/local/bin/vue vue init webpack my-project cd my-project cnpm installcnpm install axios --save-dev （vue-router目前已弃用）cnpm install mockjs --save-dev cnpm run dev9 Webpack安装
若第三步install ok,该step不需要进行 sudo cnpm install webpack -g Webpack-dev-server安装: cnpm install webpack-dev-server -g 创建软链接: sudo ln -s /opt/node-v8.7.0-linux-x64/bin/webpack-dev-server /usr/local/bin/webpack-dev-server10 Sublime Text3 安装
官网地址：http://www.sublimetext.com/ （purchase） wget https://download.sublimetext.com/sublime_text_3_build_3157_x64.tar.bz2 tar -xvvf sublime_text_3_build_3157_x64.tar.bz2 sudo mv sublime_text_3/ /opt/ cp /opt/sublime_text_3/sublime_text.desktop /usr/share/applications vim /usr/share/applications/sublime_text.desktop 终端输入sublime使用： sudo ln -s /opt/sublime_text_3/sublime_text /usr/local/bin/sublime 安装GDebi： sudo apt-get install gdebi gdebi-core sudo gdebi sublime-text_build-3114_amd64.deb (或 sudo dpkg -i sublime-text_build-3114_amd64.deb) 通过命令 subl 即可打开程序Sublime Text3的配置： 按 Ctrl ` 调出show console, 粘贴以下代码到底部命令行并回车： 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(' ',' ')).read())11 Chrome安装
64位版本： wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 32位版本： wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb sudo dpkg -i google-chrome-stable_current_amd64.deb 若缺少所需的依赖关系。执行以下命令： sudo apt-get install -f 未安装软件包 libatk-bridge2.0-0： sudo apt-get install libgtk2.0-dev sudo apt-get install libatk-bridge2.0-dev 12 Gimp安装
安装图片处理相关工具(位图/矢量图/截图 编辑): sudo apt-get install gimp inkscape shutter gimp：可以处理我们常见的图片（Linux下的PhotoShop）.inkscape：可以处理SVG等矢量图. shutter：可以进行区域截图,还可以编辑生成的截图,比如在截图中加入文本,线框,箭头等.Shutter截图时Ctrl 方向键可以在像素级调整大小,可以用Shutter延迟截取带有"菜单"的截图. shutter -s：选中区域截取图片 shutter -a：截取活动窗口去除图片背景色方法： http://blog.csdn.net/willyonzhon/article/details/50715893 https://jingyan.baidu.com/article/870c6fc33a4780b03fe4becd.html利用颜色选择工具抠图： http://blog.csdn.net/gaoguoxin2/article/details/831306513 Ruul.Screen ruler
下载地址：http://chromecj.com/web-development/2014-11/290/download.html如何在Chrome安装.crx扩展名的离线Chrome插件？ -- http://chromecj.com/utilities/2014-09/181.html14 gedit安装
sudo apt-get install gedit-plugins sudo apt-get install gedit 赞 (0)