前端自动化和前端开发环境

Posted 2020-08-03 One Place

我终于弄懂了各种前端build工具

开发环境

Node.js npm

Node.js is a javascript runtime built on Chrome\'s V8 JavaScript engine.

Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.

Node.js\' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

package.json 是npm的配置文件

dependencies 与 devDependencies 的区别

npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件：

1. –save
2. –save-dev

devDependencies 下列出的模块，是我们开发时用的，比如 grunt-contrib-uglify，我们用它混淆 js 文件，它们不会被部署到生产环境。

dependencies 下的模块，则是我们生产环境中需要的依赖。

在项目的根目录下运行下面的命令，这些插件就会被自动安装在node_modules子目录。

npm install

上面这种方法是针对已有package.json的情况。如果想要自动生成package.json文件，可以使用npm init命令，按照屏幕提示回答所需模块的名称和版本即可。

npm init

如果已有的package.json文件不包括Grunt模块，可以在直接安装Grunt模块的时候，加上–save-dev参数，该模块就会自动被加入package.json文件。

npm install <module> --save-dev
npm i webpack -D

npm i webpack -D
–save：模块名将被添加到dependencies，可以简化为参数-S。
–save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。

比如，对应上面package.json文件指定的模块，需要运行以下npm命令。

npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

Git

Git  is a version control system that is used for software development and other version control tasks.

版本管理工具 分布式 

Grunt

Grunt：任务自动管理工具

安装grunt之前需要先安装grunt-cli， grunt-cli表示安装的是grunt的命令行界面

In one word: automation. The less work you have to do when performing repetitive tasks(重复性任务) like minification, compilation, unit testing, linting,(压缩，编译，单元测试) etc, the easier your job becomes. After you\'ve configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.

Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager.(依赖于node.js)

Gruntfile.js，它是grunt的配置文件

grunt的常用模块

• grunt-contrib-clean：删除文件。
• grunt-contrib-compass：使用compass编译sass文件。
• grunt-contrib-concat：合并文件。
• grunt-contrib-copy：复制文件。
• grunt-contrib-cssmin：压缩以及合并CSS文件。
• grunt-contrib-imagemin：图像压缩模块。
• grunt-contrib-jshint：检查JavaScript语法。
• grunt-contrib-uglify：压缩以及合并JavaScript文件。
• grunt-contrib-watch：监视文件变动，做出相应动作。

一份Gruntfile.js的样板

Gulp

使用gulp构建nodejs，你只需要记住5个函数  前端构建工具gulpjs的使用介绍及技巧  gulp详细入门教程  gulp.js官方文档    gulp API docs(官方)

gulp是一个nodejs的streaming构建工具，所谓的streaming大致意思就是把构建流程想成一个个链接的管道（pipe）。

与grunt相同，也是一个自动化工具，依赖于node.js，也是首先 npm install --global gulp-cli 要安装gulp命令行工具。

Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。

gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中

5个gulp命令

gulp.task(name, fn)定义一个任务

gulp.run(tasks...)尽可能多的并行运行多个task

gulp.watch(glob, fn)当glob内容发生改变时，执行fn

gulp.src(glob)返回一个可读的stream

只需简单的理解可以用这个方法来读取你需要操作的文件就行了

gulp.dest(glob)返回一个可写的stream

gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名，

gulp常用插件

插件用法可以查看npm官网，可以搜索插件的具体用法

gulp与常用插件

自动加载插件

使用gulp-load-plugins

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。

 

 

 

bower

 Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

http-server

http-server is a simple, zero-configuration command-line http server.(简单的、“零”设置的、命令行的http服务器) It is powerful enough for production usage, but it\'s simple and hackable enough to be used for testing, local development, and learning.

requirejs

Javascript模块化编程（一）：模块的写法   Javascript模块化编程（二）：AMD规范   Javascript模块化编程（三）：require.js的用法

RequireJS is a JavaScript file and module loader. (js文件和模块加载器)

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（ECMAScript标准第六版，正式支持"类"和"模块"，但还需要很长时间才能投入实用。）

模块(module)

Modular programming is a software design technique(软件工程方面的概念) that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.

模块就是实现特定功能的一组方法。

模块的写法(逐渐进化)：

1. 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。
2. 为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。
3. 使用"立即执行函数"（Immediately-Invoked Function Expression，IIFE），可以达到不暴露私有成员的目的。
4. 如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。
5. 宽放大模式（Loose augmentation）
6. 输入全局变量 独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

模块的规范

先想一想，为什么模块很重要？

因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更重要了。

AMD

Asynchronous module definition (AMD) is a JavaScript specification(规范) that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired.

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是前面的模块加载成功之后的回调函数。

requirejs

requirejs是实现了AMD规范的js库。

require.js的诞生，就是为了解决这两个问题：

（1）实现js文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。