linux子系统ubuntu中node和git和gulp的安装配置

因为我用的是windows系统,有些linux命令无法使用,所以我安装了linux的子系统ubuntu,具体安装方法可以参考这篇文章,今天这里我这里就主要介绍下ubuntu系统下常用软件的安装配置

node.js

Node.js是建立在谷歌的V8 JavaScript引擎服务器端的软件平台上;在构建高性能的服务器端应用程序上,Node.js在JavaScript中已是首选方案,是什么让使用Node.js库和应用程序的庞大生态系统来开发服务器后台变得如此流行;Node.js自带一个被称为npm的命令行工具可以让你轻松地安装它,进行版本控制并使用npm的在线仓库来管理Node.js库和应用程序的依赖关系

下载和安装nodejs

以下部分我们将介绍在Ubuntu Linux下安装Node.js,其他的Linux系统如Centos等类似如下安装步骤

第一种方法

从nodejs官网 http://nodejs.org/ 下载最新源代码到本地home目录,然后再解压,配置,编译,最后安装; 命令如下所示:

// 下载nodejs压缩文件,也可以直接点开网址点击下载
$ wget http://nodejs.org/dist/v9.8.0.tar.gz

// 解压并进入node：
$ tar -zxf node-v9.8.0.tar.gz
$ cd node-v9.8.0

// 默认安装： （默认在home目录下）
$ ./configure
$ make
$ sudo make install

//选择目录安装（将nodejs安装在/usr/local/node目录下）
$ ./configure –prefix=/usr/local/node
$ make
$ sudo make install

其中nodejs最新版为v9.8.0,可以从http://nodejs.org/dist/地址查看

注意:安装方式最好选择自定义安装,最好还要配置环境变量,对于快速的默认安装,这种方式以后会出现问题

通过检测node的版本号查看nodejs有没有安装成功,命令如下所示:

$ node --version

我这里显示v9.8.0就表示安装成功了,接下来就可以写一些简单的demo再自己测试一下

第二种方法

另外,可以通过ubuntu官方apt安装工具安装最新LTS版本的node,附上ubuntu安装node和npm的命令行命令:

sudo apt install nodejs-legacy
sudo apt install npm

最新版本安装方法

//安装npm
sudo apt install npm

//升级npm为最新版本
sudo npm install npm@latest -g

通过npm -v可以发现npm版本号

//安装nodejs的模块n
sudo npm install -g n

//通过n模块安装指定版本的nodejs

//安装官方最新版本
sudo n latest

//安装官方稳定版本
sudo n stable

//安装官方最新LTS版本
sudo n lts

然后通过node -v可以发现node安装成功

执行以下命令即可全局安装cnpm,之后可以直接使用cnpm代替npm,命令格式是一样的

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果全局安装之后无法直接使用全局安装命令,一般是npm的路径没有在系统变量中,可以通过以下方法解决:

执行npm prefix -g会输出全局安装路径;Windows用户把输出的路径添加到环境变量%PATH%里面,环境变量的设置请参考上一篇文章:windows下node和git和gulp的配置总结

第三种方法

在Github上获取 Node.js源码

sudo git clone https://github.com/nodejs/node.git

修改目录权限

sudo chmod -R 755 node

使用 ./configure 创建编译文件

cd node
sudo ./configure
sudo make
sudo make install

查看 node 版本

node --version

git.js

最早Git是在Linux上开发的,很长一段时间内Git也只能在Linux和Unix系统上跑;不过,慢慢地有人把它移植到了Windows上;现在,Git可以在Linux/Unix/Mac和Windows这几大平台上正常运行了

Ubuntu下git的安装与使用与Windows下的大致相同,只不过个人感觉在Ubuntu下使用git更方便

首先,确认你的系统是否已安装git,可以通过git指令进行查看

像上面的命令,很多Linux会友好地告诉你Git没有安装,还会告诉你如何安装Git;Ubuntu Linux下通过一条sudo apt-get install git命令就可以直接完成Git的安装,非常简单

安装完成后进行git配置

git config --global user.name "xxx"
git config --global user.eamil "你的邮箱地址"

配置完成后,需要创建验证用的公钥,因为git是通过ssh的方式访问资源库的,所以需要在本地创建验证用的文件;

//在用户目录~/.ssh/下建立相应的密钥文件
ssh-keygen -C 'you email address@gmail.com' -t rsa //注意ssh与-keygen之间没有空格

创建完公钥后需要上传,使用命令

cd ~/.ssh

进入~/.ssh文件夹,输入

gedit id_rsa.pub

打开id_rsa.pub文件,复制其中所有内容;接着访问http://git.oschina.net/profile网页,点击SSH公钥,标题栏可以随意输入,公钥栏把你刚才复制的内容粘贴进去就OK了

可以使用

ssh -T git@git.oschina.net

命令来测试连接是否畅通

接下来的内容就和在Windows下使用git上传一样了,先自己创建一个文件夹,把敲的代码拷贝进去(或每次使用vim的时候直接切到该文件夹目录下进行编辑),先使用

git init

指令初始化一个git仓库,接着输入

git add .

添加文件,输入

git commit -m "注释"

提交至仓库

输入

git remote add origin https://git.oschina.net/你的用户名/项目名.git
git push origin master

即可完成推送

git本地的体现一般在.git和.idea;.gitignore文件里是git上传的时候要忽略的文件

gulp

gulp是一个依赖于npm的css/js打包工具,所以在安装gulp之前需要先安装node和npm

安装gulp

命令行输入

cnpm install gulp -g

等待安装,输入

gulp -v

回车输出gulp版本号,表示安装成功

生成package.json文件

在本地新建一个文件夹,命令行切换到当前文件夹,我是在D盘下新建一个名为gulptest的文件夹

命令行输入

cnpm init

一直回车,就可以生成package.json文件,内容如下:

本地安装gulp以及我们需要gulp的插件

现在开始本地安装gulp以及我们需要gulp的插件:

命令行输入

cnpm install gulp --save-dev

安装完成后我们可以查看package.json的变化

package.json文件多出了

"devDependencies": {
        "gulp": "^3.9.1"
}

"gulp": "^3.9.1"就是我们刚本地安装的gulp及版本号

可能有的人会问,为什么gulp安装了两次?

答:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能

继续安装我们需要gulp的插件吧！

cnpm install gulp-less gulp-watch gulp-concat gulp-minify-css --save-dev

安装完成后我们可以查看package.json的变化,又多出了几个插件，暂时先安装这几个gulp插件

也可以根据gulpfile.js中的设置,通过cnpm install一次安装所有需要的插件

配置gulpfile.js文件

在项目根目录下创建gulpfile.js文件,记住必须名字必须是gulpfile

gulp-less编译less

将gulpfile.js配置成如下图,再在命令行输入gulp即可编译less文件

gulp-watch 自动编译less(监听事件)

编译less生成css文件算是完成了,但每次修改less之后都要手动执行一遍gulp命令,很明显这是不科学的,于是需要一个监听事件的插件,那就是gulp-watch,配置如下图,命令行执行gulp-watch,当less发生改变时一按下保存将自动执行gulp-watch命令进行编译;我们也可以将testWatch任务放到默认任务里执行

gulp.task("default",["testLess","testWatch"]);

命令行执行gulp即可

但当less文件出现语法错误时,我们习惯性的按下保存或是编译器带有自动保存功能时,watch可能会中断,再次编译时需要我们再次输入命令;解决的办法是:引入gulp-plumber模块(本地已安装直接引入即可,如未安装需cnpm install gulp-plumber --save-dev安装到当前项目下),这样就能处理出现异常而且不终止watch事件。

到这里我们已经完成了less的自动编译,当我们想在编码时查看出现了什么异常而又不想每次出现异常就去查看命令时,我们可以用到gulp-notify;先是安装/引入,再在plumber()括号内加入{errorHandler: notify.onError('Error: <%= error.message %>')},当出现异常时屏幕右下角就会弹出一个异常信息的窗口

合并css文件

在工作中,我们可能会编译出多个css文件,这就需要我们进行合并处理;gulp-concat可以帮我们做这件事,在gulpfile引入gulp-concat(确保已安装)

less()执行完将编译后的css文件进行合并,重新命名为stylesheet.css,再将其输出到css文件夹下;我们也许需要进行压缩处理,并重命名为-min.,引入gulp-rename和gulp-minify-css(确保已安装);

这时会输出两个多输出一个-min的文件;less自动编译css已经完成了

gulp分全局和本地,一般全局只要检测到有gulp就没有问题,本地gulp的问题一般都存在于文件夹node_modules中,如果实在无法覆盖解决可以直接先删除这个文件夹后再安装本地gulp