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 update
sudo apt-get upgrade

安装完整语言包请点击电脑右上角的系统设置->语言支持，然后根据提示安装

ubuntu报错E:未找到软件包xxx的换源解决办法： https://blog.csdn.net/qq_33485434/article/details/80820163

3 安装虚拟机

(1)终端命令 编辑sources.list
sudo gedit /etc/apt/sources.list

(2)添加 软件源将下面的地址加入sources.list 的末尾，保存并退出
deb http://download./virtualbox/debian precise contrib

(3)终端命令 导入公钥，并更新源
wget -q http://download./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 ysq
PS：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.00

4 安装GIT

a. sudo apt-get install git-core qgit
b. git config --global user.name "Your Name"
c. git config --global user.email "Your [e-mail]"
d. ssh-keygen -t rsa  //执行该命令后只需一直按回车即可。最后在~/.ssh目录下会生成id_rsa.pub文件，拷贝这个文件并修改为你的名字拼音.pub，发送给指定同事，等待确认，确认ok好即可使用**git**

5 Node.js安装

方式1：二进制包安装：(强烈建议)
    Nodejs官网提供了编译好的Linux二进制包:
        http:///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:///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.
    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 publish

7 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-imagemin

7.4 编译 LESS

   cnpm install gulp-less

7.3 编译 Sass

   cnpm install gulp-ruby-sass

8 编译 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 install
cnpm install axios  --save-dev   （vue-router目前已弃用）
cnpm install mockjs --save-dev
    cnpm run dev

9 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-server

10 Sublime Text3 安装

官网地址：http://www./ （purchase）  
    wget https://download./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./'   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/8313065

13 Ruul.Screen ruler

下载地址：http:///web-development/2014-11/290/download.html
如何在Chrome安装.crx扩展名的离线Chrome插件？
 -- http:///utilities/2014-09/181.html

14 gedit安装

    sudo apt-get install gedit-plugins               
    sudo apt-get install gedit

来源：https://www./content-4-835101.html