node.js

MarkDown

文本标记语言，可以用特殊的符号对文本进行标记或设置

一般用于写文档或文本信息，类似于word

可以编译成html/pdf/word等格式

 

软件

typora，编译markdown

 

语法

#空格    标题

 

github

开源网站

 

前端工程化（自动化开发）

定义

    在前端开发过程中，随技术越来越广泛，性能/开发效率等要求越来越高，应用程序也越来越复杂，在构建项目时对于某些操作（压缩、合并、编译代码等）比较繁琐，css没有逻辑性，但less和sass有逻辑性，可以编译成css 可以利用一些线上工具或者一些软件来做，但无法找个某个方式专门针对当前项目

 

nodejs

    是js的运行环境，当js代码运行在nodejs中时，可以操作文件系统，于是有一些人利用nodejs开发出了一些专门针对前端的一些开发工具，可以利用这些运行在node中的工具来构建开发环境，在构建好的开发环境中进行开发时，工具会自动按照我们的意愿执行操作。所以，当代前端开发工程师在开发项目时一般都需要nodejs环境，也需要利用运行在nodejs中的工程化工具来帮助开发

 

 

前端开发工具

除了nodejs是必须的，还需要npm/cnpm/yarn等包管理器，也需要gulp/webpack/grunt等自动化工具，这些自动化工具会根据我们的配置将文件进行操作

 

gulp

    基于流的自动化构建工具

    查找到对应的文件内容后，利用node中的stream对文件进行操作，所有gulp是基于流的

 

webpack

    模块化打包工具

    module.exports    把配置暴露出去，且只暴露一次。因为是模块。所以不用写后缀名

 

 

搭建前端工程化环境

一、下载安装

1、下载安装nodejs环境    [官网]（nodejs.org/zh-cn）

    一般有两个版本 LTS（长期支持的稳定版本）/NEW

    按照时需要安装到C盘，因为可以在全局环境下使用nodejs，如果安装在其他盘，需配置nodejs环境变量(https://www.cnblogs.com/zhouyu2017/p/6485265.html)

 

2、在命令行工具中访问到node（node没有UI界面）

 

二、搭建前端工程化环境

1、项目选址（建文件夹）

 

2、项目备案（在项目目录中建立package.json文件，来描述这个项目的相关信息）

    package.json中有两个配置    dependencies（生产依赖）/devDependencies（开发依赖）

     在项目目录中执行npm init之后输入项目配置信息后生成文件

 

3、安装gulp

        安装的时候先在全局环境安装                cnpm install --global gulp

        然后在本地（项目目录内）进行安装     cnpm install --save-dev gulp

 

4、建立任务分配书

        在项目中创建gulpfile.js文件，在这个文件中创建任务让gulp执行

 

 

 

命令行工具

与计算机的交流是通过代码的，即通过代码让计算机执行操作，但对于大部分用户使用难度较高，所以一般计算机操作系统都提供了UI界面，但linux操作系统就有一个版本是没有UI界面的，所有的操作都需要执行dos命令去操作。所有，利用UI界面可以进行的操作，都可以利用命令来执行，但因为nodejs没有UI界面，所有只能通过命令来执行node的操作

 

windows提供了CMD工具来执行命令，mac的os系统提供终端执行命令

 

npm

（node package manager） node的包管理器，node里有很多工具包，有的是nodejs自带的，有的是第三方开发就需要利用npm这样的包管理器进行管理（下载/删除/更新）

因为npm在下载包的时候，下载源默认是国外的地址，下载慢甚至会失败，在国内也可以使用cnpm/yarn/bower这样的包管理器，但这些包管理器都需要利用npm下载

 

包：是一个工具或者一个模块或者一个功能部分

 

cnpm

    是npm淘宝的镜像

1、安装cnpm    

    [官网]（http：//npm.taobao.org）

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

 

2、使用

    工具    npm

    操作    install（uninstall）  

    包名    cnpm  

    环境    -g（全局）

 

如果利用npm安装包时太慢，我们可以切换npm下载包的源

    (https://www.cnblogs.com/sghy/p/6840925.html)：

    npm config set registry https://registry.npm.taobao.org