前端工程化
工程化
所谓前段工程自动化就是:由于前端分裂,有人写css代码,有人写scss,有人写es5,有人写es6,那么就需要翻译工具(命令行工具)翻译成ie或其他所有浏览器能运行的代码版本。
什么是前段工程化,就是要从写html,css,js到写自动化,模块化的html,css,js,并且考虑性能优化。
自动化
举个例子: 使用命令行工具实现代码自动化转变。
sass
sass和scss的关系:语法不同,sass语法更加简洁。
scss完全兼容css语法,他只是在css上添加了一些更高级的语法。
sass工具的作用是将scss语法的文件翻译成普通的语法的css文件。
Sass的使用
Sass的使用很简单,记住两条指令即可。
- 第一条指令如下,意思是编辑input.scss,并输出储存在output.css文件中。指令只编译一次。
node-sass input.scss output.css
- 第二条指令增加了一个watch功能。同上述指令,编译input.scss储存至output.css。指令编译多次,适用于开发过程中的编译。.scss文件的改动会被检测(watch)并立即编译写入相应的.css文件中。
node-sass --watch input.scss output.css
总结:加--watch
(或者-w)监听修改,并立即编译,不加--watch
只编译一次
Babel
Babel 转码器 ——阮一峰ECMAScript 6 入门教程
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。(例如ie不支持)
例如:
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
命令行使用方法举例:
将js目录下的js文件转化成到lib目录下(ES6代码转为ES5代码)
web应用的目录规范
工程化中自动化的过程
例如我们有这样的工程目录。
- 那么我们需要开一个sass监听scss文件的修改,并转换为css,然后放到dist里。
node-sass src/css/ -o dist/css/ -w
- 再开一个Babel,监听js文件的修改,并将es6转化为es5,然后放到dist里
./node_moudules/.bin/babel src/js/ -d dist/js/ --watch
- 在监听src/index.html,当index.html文件改变的时候,就复制一份到dist中去。等等
这样,当你在src目录中修改代码,写代码的时候,dist目录中的代码自动转换成可以上线的代码。这就是自动化的过程。
自动化的过程就是使用命令行工具,把源代码翻译成发布代码。 所有的代码需要从src拷贝到disk,如果需要翻译,就中途翻译(sass,babel),不需要翻译就直接拷贝。
所谓前段工程自动化就是:由于前端分裂,有人写css代码,有人写scss,有人写es5,有人写es6,那么就需要翻译工具(命令行工具)翻译成ie或其他所有浏览器能运行的代码版本。还有一个需求是就是缓存,每一次更新代码,都需要自动改js文件中的版本号,这也需要工具自动进行。
但是那么多工具,不能每次写代码都开着吧?于是前端从nodejs出现之后,开始用一个工具代替这些自动化工具,最开始是Grunt(已过时),然后是Gulp,现在开始被webpack替代,所以这就是我们为什么要学习webpack!
git上传忽略node_modules
1、在需要创建 .gitignore 文件的文件夹, 右键选择Git Bash 进入命令行,进入项目所在目录。2、输入 touch .gitignore ,生成“.gitignore”文件。 3、在”.gitignore” 文件里输入你要忽略的文件夹及其文件就可以了。(注意格式)
例如:
node_modules/
dist/
npm-debug.log
作者:懂懂kkw
一般要忽略node_modules和dist,只上传源文件,然后运行命令,翻译源文件为生产文件。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue.js实现咸鱼底部Tab凸起|vue自定义导航条组件
- 在Linux中查看所有正在运行的进程的方法
- Apache跨域资源访问报错问题解决方案
- Windows Telemetry服务特权提升
- 滥用DComposition在外部窗口上渲染
- 通过LUMP_PAKFILE的源引擎内存损坏
- MongoDB Change Stream之一——上手及初体验
- MongoDB 慢日志字段解析
- leetcode哈希表之第一个只出现一次的字符
- 转录组RNA-Seq使用docker+bioconda搭建分析环境
- 企业自建GitLab代码仓库安装与基础配置使用
- 全网最全的数据库操作命令,一口气从头看到尾,蛮有收获的!
- 【C++】 使用sort函数进行容器排序
- 宝塔如何安装 MDClub
- Jackson 的 JsonManagedReference 和 JsonBackReference 注解