（bower、grunt、gulp、jspm、karmam、webpack）前端工程自动化开发工具

深碍√TFBOYSˉ_ 2022-06-15 06:58 203阅读 0赞

`gulp `是工具链，可以配合各种插件做js压缩，css压缩，less编译等工作

`webpack `是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件

`bower `是包管理器，用来管理你项目里的那些外部依赖的

## [1 Bower ][1 Bower] ##

安装bower：npm install bower

使用bower安装包： install jquery --save

## [2 GRUNT ][2 GRUNT] ##

安装grunt：npm install -g grunt-cli

使用grunt：直接执行grunt

grunt的task插件，可以参考：[http://www.gruntjs.net/plugins][http_www.gruntjs.net_plugins]

## [3 GULP ][3_GULP] ##

安装：tnpm install -g glup

执行方法：gulp

gulp的其他插件列表 [http://gulpjs.com/plugins/][http_gulpjs.com_plugins]

## [4 jspm][] ##

安装：tnpm install -g jspm

使用jspm安装依赖：jspm install jquery

## [5 karma ][5 karma] ##

karma可以理解成一个测试工具

安装：tnpm install -g karma-cli

执行方法：karma start src/test/javascript/karma.conf.js

## [6 webpack ][6 webpack] ##

webpack是一个模块资源加载器，其中js，css，img都可以理解为一个一个资源，这些都是用不同loader进行加载的，webpack下不同的loader可以参考  [http://webpack.github.io/docs/list-of-loaders.html][http_webpack.github.io_docs_list-of-loaders.html]

webpackdevserver的文档可以参考：http://webpack.github.io/docs/webpack-dev-server.html

react的热部署

react-hot-loader这个神器 [http://gaearon.github.io/react-hot-loader/getstarted/][http_gaearon.github.io_react-hot-loader_getstarted]

[1 Bower]: https://bower.io/
[2 GRUNT]: http://gruntjs.com/
[http_www.gruntjs.net_plugins]: http://www.gruntjs.net/plugins
[3_GULP]: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
[http_gulpjs.com_plugins]: http://gulpjs.com/plugins/
[4 jspm]: http://jspm.io/
[5 karma]: https://github.com/karma-runner/karma
[6 webpack]: https://github.com/webpack
[http_webpack.github.io_docs_list-of-loaders.html]: http://webpack.github.io/docs/list-of-loaders.html
[http_gaearon.github.io_react-hot-loader_getstarted]: http://gaearon.github.io/react-hot-loader/getstarted/