前端工程化

工程化

所谓前段工程自动化就是:由于前端分裂,有人写css代码,有人写scss,有人写es5,有人写es6,那么就需要翻译工具(命令行工具)翻译成ie或其他所有浏览器能运行的代码版本。

什么是前段工程化,就是要从写html,css,js到写自动化,模块化的html,css,js,并且考虑性能优化

自动化

举个例子: 使用命令行工具实现代码自动化转变。

sass

安装 node-sass 的正确姿势

官方github

sass和scss的关系:语法不同,sass语法更加简洁。

scss完全兼容css语法,他只是在css上添加了一些更高级的语法。

sass工具的作用是将scss语法的文件翻译成普通的语法的css文件

Sass的使用

官方github命令行用法

Sass的使用很简单,记住两条指令即可。

  1. 第一条指令如下,意思是编辑input.scss,并输出储存在output.css文件中。指令只编译一次。node-sass input.scss output.css
  2. 第二条指令增加了一个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不支持)

ECMAScript 6 简介

例如:

// 转码前
input.map(item => item + 1);

// 转码后
input.map(function (item) {
  return item + 1;
});

命令行使用方法举例:

将js目录下的js文件转化成到lib目录下(ES6代码转为ES5代码)

web应用的目录规范

工程化中自动化的过程

例如我们有这样的工程目录。

  1. 那么我们需要开一个sass监听scss文件的修改,并转换为css,然后放到dist里。 node-sass src/css/ -o dist/css/ -w
  2. 再开一个Babel,监听js文件的修改,并将es6转化为es5,然后放到dist里 ./node_moudules/.bin/babel src/js/ -d dist/js/ --watch
  3. 在监听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,只上传源文件,然后运行命令,翻译源文件为生产文件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王金龙的专栏

Chromium源码系列一:Chromium简介及源代码获取和编译

​ Chromium是一个由Google主导开发的网页浏览器,以BSD许可证等多重自由版权发行并开放源代码。Chromium的开发早自2006年即开始,设计思想...

5052
来自专栏IT大咖说

前后端高效协作开发的11条建议

内容来源:作者,深予之 (@senntyou),https://github.com/senntyou/blogs;来自,https://segmentfaul...

821
来自专栏mathor

协议常识

 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准 ...

1742
来自专栏菜鸟计划

webpack前言:前端模块系统的演进

前端开发和其他开发工作的主要区别,首先是前端是基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器,这些资源是通过增量加载的方式运行到浏览器端, ...

3585
来自专栏黄Java的地盘

chrome扩展应用开发快速科普

本文通过对chrome插件的各个部分进行快速的介绍,从而让大家了解插件各个部分的关系,并且知道如何将其进行组装成一个完整的chrome插件。

741
来自专栏信安之路

gmail 和 google 的两个 xss 老漏洞分析

在这篇文章中,我会展示一下我在 Gmail 和 Google+ 中找到的两个 XSS 漏洞。特别是我会解释两个问题:

1012
来自专栏全华班

敏捷工作流开发平台(学习参考)

资源管理(用于服务器鉴权,用户分配资源菜单)、数据字典、定时计划(定时调度引擎)、系统属性(多环境系统参数定义)、系统数据源(系统支持多数据源的数据获取,系统数...

2081
来自专栏desperate633

session和cookies会话机制详解session management会话管理的原理servlet&jsp中的session会话管理机制cookie的更多用处

web请求与响应基于http,而http是无状态协议。所以我们为了跨越多个请求保留用户的状态,需要利用某种工具帮助我们记录与识别每一次请求及请求的其他信息。举个...

861
来自专栏建站达人秀

如何搭建 Firekylin 博客

FireKylin 是基于国内先进的 Node.js 框架 ThinkJS 2.0 开发的通用博客系统,是由奇虎360公司Web前端工程师组成的专业团队 75T...

3132
来自专栏静下来

discuz修改游客发帖隐藏ip的方法

discuz游客发帖,默认是显示ip前面3段的,也就是显示为127.0.0.x。 既然选择了游客发帖,我们也可以尽量的保护游客的ip不被泄漏。 那就修改disc...

3265

扫码关注云+社区

领取腾讯云代金券