开发者社区> webmirror> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

因为我用的是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指令进行查看
1
像上面的命令,很多Linux会友好地告诉你Git没有安装,还会告诉你如何安装Git;Ubuntu Linux下通过一条sudo apt-get install git命令就可以直接完成Git的安装,非常简单

安装完成后进行git配置

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

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

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

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

cd ~/.ssh

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

gedit id_rsa.pub

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

ssh -T git@git.oschina.net

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

git init

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

git add .

添加文件,输入

git commit -m "注释"

提交至仓库
2
输入

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

即可完成推送
1
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的文件夹
1
命令行输入

cnpm init

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

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

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

命令行输入

cnpm install gulp --save-dev

安装完成后我们可以查看package.json的变化
3
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文件
4
gulp-watch 自动编译less(监听事件)

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

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

命令行执行gulp即可
5

但当less文件出现语法错误时,我们习惯性的按下保存或是编译器带有自动保存功能时,watch可能会中断,再次编译时需要我们再次输入命令;解决的办法是:引入gulp-plumber模块(本地已安装直接引入即可,如未安装需cnpm install gulp-plumber --save-dev安装到当前项目下),这样就能处理出现异常而且不终止watch事件。
6
到这里我们已经完成了less的自动编译,当我们想在编码时查看出现了什么异常而又不想每次出现异常就去查看命令时,我们可以用到gulp-notify;先是安装/引入,再在plumber()括号内加入{errorHandler: notify.onError('Error: <%= error.message %>')},当出现异常时屏幕右下角就会弹出一个异常信息的窗口
7
合并css文件

在工作中,我们可能会编译出多个css文件,这就需要我们进行合并处理;gulp-concat可以帮我们做这件事,在gulpfile引入gulp-concat(确保已安装)
8
less()执行完将编译后的css文件进行合并,重新命名为stylesheet.css,再将其输出到css文件夹下;我们也许需要进行压缩处理,并重命名为-min.,引入gulp-rename和gulp-minify-css(确保已安装);
9
这时会输出两个多输出一个-min的文件;less自动编译css已经完成了

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 Node.js Express 的最佳实践
Production best practices: performance and reliability 本文讨论部署到生产的 Express 应用程序的性能和可靠性最佳实践。 这个话题显然属于“devops”世界,涵盖传统的开发和运营。 因此,信息分为两部分
57 0
Node.js Express 框架2
文件上传 以下我们创建一个用于上传文件的表单,使用 POST 方法,表单 enctype 属性设置为 multipart/form-data。 index.html 文件上传表单 文件上传: 选择一个文件上传:    server.
1194 0
Node.js Express 框架
Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。
1593 0
Node & Express 入门指南
本文讲的是Node & Express 入门指南,Node 是一个 JavaScript 环境,使用了与谷歌 Chrome 浏览器相同的 JavaScript 引擎。Node 具有非常强大的功能,无论对 web 服务器还是 web 服务器的平台 API 来说,它都是搭建服务端应用中间层的诱人之选。
1467 0
Node.js历险记之express框架入门篇
打开微信扫一扫,关注微信公众号【数据与算法联盟】 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Github:https://github.com/thinkgamer 写在前面的话 Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。
1291 0
基于node.js的web框架express
1.安装node.js方法:   window :https://nodejs.org/en/   linux:http://www.runoob.com/nodejs/nodejs-install-setup.
630 0
Express入门( node.js Web应用框架 )
运用Express框架构建简单的NodeJS应用   Start    确认安装了NodeJS之后(最新的Node安装好后NPM也会自带安装了),npm可理解为nodejs的一个工具包。可通过查看版本来检测是否安装成功: F:\>node -v v0.10.32 F:\>npm -v 1.4.28 创建一个目录,在这个目录中首先得定义一下应用程序“包”文件,它和其它的node程序包是一样的。
908 0
Node.js开发者有福了!Express 3.0发布
Express 3.0是一个维护版本,针对2.x版修复了很多问题,并加入了很多新功能。 在使用Express框架时,要记住,Express框架是帮助开发者快速实现HTTP通信相关的功能,而不是成为像Rails那样功能强大、全面的框架。
759 0
+关注
webmirror
Good good study, day day up
122
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载