伊人怎会持宠而骄
希望有人懂你的低头不语、小心翼翼守护你的孩子气
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下载包的源
    npm config set registry https://registry.npm.taobao.org
posted on 2019-01-21 10:19  伊人怎会持宠而骄  阅读(118)  评论(0编辑  收藏  举报