首页 > 代码库 > Node环境配置及Gulp工具

Node环境配置及Gulp工具

2024-08-20 00:31:17   222人阅读

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‘))

});

?

Node环境配置及Gulp工具


联系
我们