Node环境配置及Gulp工具

Posted 2020-08-19

1.GitLab网上使用

• 两种登录方式

  • 通过Http登录，需要用户名和密码

  • 通过SSH登录，不需要用户名和密码只需要RSA密钥就行，RSA通过在git bash中输入 ssh-keygen -t rsa生成，生成好的密钥通过生成的路径找到对应的id_rsa.pub文件，将其内容添加到gitlab中并保存ssh密钥，以后的push 或者pull操作都不会需要用户名和 密码。

• 克隆仓库

  • git clone 你的地址（这里可以通过https地址或者通过SSH方式获取你的网上仓库）

• 获取仓库内容

  • git pull 地址/origin master 可以通过https地址获取仓库数据，但是这样做太麻烦了，使用origin相当于替换了之前的地址用法都是一样的。

    • 其实这样使用包含了两个操作

    • git fetch origin (获取远端的分支)

    • git merge origin/master （合并远端分支）

• 远端分支管理

  • 创建远端分支

    • 1.在本地创建好分支以后，本地 push 该分支即可

    • 2.在网页上创建分支好以后，通过git fetch获取该分支

  • 删除远端分支

  • git push origin --delete 需要删除的分支，那么其他人如果需要更新分支 需要 git fetch -p

• git 补充知识

  • 保存当前的工作现场

    • 使用git stash保存当前的工作现场，那么就可以切换到其他分支进行工作，或者在当前分支上完成其他紧急的工作，比如修订一个bug测试提交。

      • 1 在通过git add 提交完代码到缓存区以后 输入git stash 保存现场，完成以后通过创建其他分支或者跳转其他分支解决对应的工作

      • 2 解决完对应的工作后跳转到之前的工作分支中在通过 git stash pop 还原现场

  • 查看隐藏分支 git branch -a

2.Node

• 什么是Node

  • Node.js 是一个基于 Chrome V8 引擎的 javascript 运行环境

• 官网

• Node.js(难道是类似于jQuery的js文件)

• chrome浏览器的JS引擎(V8引擎)

• javascript组成

  • ECMAScript 基本语法

  • DOM

  • BOM

• node 只解析ES,像aler()之类的就不能使用了

  • 加上谷歌V8对js的解析速度大大提高

  • 提供了一些系统级API,比如对文件的操作

  • 其实就是一个js运行环境

• 安装Node

  • 不要安装在中文路径

  • nvm Node Version Manager（版本管理）

  • nrm Node Registry Manager（路径管理）

  • npm Node Package Manager （依赖包管理）www.npmjs.com npm下载地址

• 常用nvm命令

  • nvm ls 查看node下载的版本

  • nvm install 4.6.0 下载名为4.6.0的版本

  • nvm use 4.6.0 切换4.6.0版本

• 常用nrm 命令

  • nrm ls查看不同的下载源地址

  • nrm use cnpm 切换到cnpm下载源

• 常用的npm命令

  • npm init 初始化一个 package.json 文件，如果加上-y就不需要在敲回车了

  • npm install -g bower 全局安装bower

  • npm install jquery --save-dev 本地安装jquery并记录到package.json中

  • npm uninstall 包名 删除包 如果是全局安装就加上-g

3.Bower

• 什么是bower

  • bower是一个前端的管理工具，主要用来管理前端的包例如：Jquery、BootStrap、Angular等。

  • 有人会有疑问为什么npm也是管理工具我还要学习bower管理工具？

    • 原因很简单，因为就像有迅雷下载你为什么还要用QQ旋风、电驴、快车下载，其实原因都一样因为npm在某些时候不能满足用户需求那么市场上就会出现替代产品。

  • bower网站

    • 官网

    • 中文网

  • 如何使用bower进行管理

    • 安装Bower:npm install -g bower

    • 创建包bower.json:bower init

    • 安装各种包文件:bower install < package>,如下载jquery: bower install jquery ，bower install jquery#1.8.0 选择下载1.8.0版本

    • 卸载包文件:bower uninstall < package>

    • 包搜索：bower search <package>

    • 包版本：bower info <package>

    • 修改Bower安装位置：在项目根目录下创建.bowerrc然后添加以下内容`{

           "directory": "vendor"//这里是指定包安装路径，加完以后记得删除这条注释

      }`

4.Gulp

• 什么是gulp

  • 用自动化构建工具增强你的工作流程！

• 什么又是自动化构建

  • 当一个项目足够大的时候，我们会采按功能划分给不同的人员开发，进一步各个功能又会划分成不同的模块进行开发，这就会造成一个完整的项目实际上是由许许多多多的“代码版段”组成的；我们开发中又会用到less、sass等一些预处理程序，需要将这些预处理程序进行解析；为了减少请求需要将css、javascript进行合并；为了加速请求需要对html、css、javascript、images进行压缩；这一系列的任务完全靠手功完成几乎是不可能的，需要借助构建工具才可以实现。所谓构建工具是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。

• 不同的构建工具

  • 常见的构建工具包括：Grunt、Gulp、F.I.S（百度出品）

• gulp的优点

  • 易于使用通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

  • 构建快速利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

  • 插件高质Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

  • 易于学习通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

• 入门指南

  • 1. 全局安装 gulp：$ npm install --global gulp-cli

  • 1. 作为项目的开发依赖（devDependencies）安装：$ npm install --save-dev gulp

  • 1. 在项目根目录下创建一个名为 gulpfile.js 的文件： ` var gulp = require(‘gulp‘); gulp.task(‘default‘, function() { // 将你的默认的任务代码放在这}); `

  • 1. 运行 gulp： $ gulp

• gulp示例代码· gulp.task(‘image‘, function () {return gulp.src(‘./images/*‘, {base: ‘./‘})

  .pipe(imagemin())
  .pipe(gulp.dest(‘./dist‘));

  }); ·

• gulp插件库：

  [官网地址](http://gulpjs.com/plugins/)
  [npm也能找到gulp插件](https://www.npmjs.com/)

• 常用插件gulp-autoprefixer(css加前缀)https://www.npmjs.com/package/autoprefixer`//通过require引用gulpvar gulp = require(‘gulp‘);var autuprefixer=require(‘gulp-autoprefixer‘);//添加css前缀gulp.task(‘cssautuprefixer‘,function () { //通过src获取到需要的css文件 //*表示全部匹配 //pipe管道 起到一个承前启后的作用 //dest输出结果 gulp.src(‘./css/*.css‘)

    .pipe(autuprefixer())
    .pipe(gulp.dest(‘./dist/css‘));

  });`

gulp-uglify(最小化 js 文件)https://www.npmjs.com/package/gulp-uglify `//最小化jsgulp.task(‘uglify‘,function () { gulp.src(‘./js/*.js‘, {base: ‘./‘})

   .pipe(uglify())
   .pipe(gulp.dest(‘./dist‘))

});`gulp-htmlmin(压缩html文件)https://www.npmjs.com/package/gulp-minify-html`//压缩html页面gulp.task(‘htmlmin‘,function () {

gulp.src(‘./*.html‘, {base: ‘./‘})
.pipe(htmlmin({
    collapseWhitespace: true,
    removeComments:true,
    minifyJS:true,
}))
.pipe(gulp.dest(‘./dist‘));

});`gulp-imagemin(最小化图像)https://www.npmjs.com/package/gulp-imagemin`//压缩图片gulp.task(‘imagemin‘,function () {

gulp.src([‘./images/*.jpg‘,‘./images/*.png‘], {base: ‘./‘})
    .pipe(imagemin())
    .pipe(gulp.dest(‘./dist‘))

});

?