• Node环境配置及Gulp工具


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

    });

  • 相关阅读:
    JavaBean理解
    你应该掌握的七种回归技术
    回归分析步骤
    rsync命令(同步/备份数据)
    获取客户端访问的ip地址
    SSO单点登陆
    产品分类之属性选择
    linux的SVN搭建与同步
    php 实现 mysql数据表优化与修复
    php程序备份还原mysql数据库
  • 原文地址:https://www.cnblogs.com/bici/p/6050423.html
Copyright © 2020-2023  润新知