常见的构建工具对比

通常常用的构建工具有npm script,grunt,gulp,webpack.

建构工具可以做的操作：代码转换，文件优化，代码分割，模块合并自动刷新，代码校验，自动发布。

npm 是安装在node.js附带的包管理，npm script是npm内置的一个功能，允许在package.json文件里面使用script字段来定义任务，ege:

{"script"：{"dev":"node dev.js",
            "pub":"node build.js"

            }
}

复制代码

底层原理是shell脚本来运行dev和pub

grunt有大量现成的插件封装了常见的任务，管理任务之间的依赖，每个任务的具体执行代码和依赖关系都在配置文件Gruntfile.js中。ede:

module.exports=function(grunt){//所有插件的配置信息
grunt.initConfig({
uglify:{
app_task:{
files:{
'build/app.min.js':['lib/index.js','lib/test.js']

}

}

},
//watch插件的配置信息
watch:{
another:{
files:[lib/*.js]
}

}
})

//告诉grunt我们要使用这些插件
grunt.loadNpmTask('grunt-contrib-uglify');

grunt.loadNpmTask('grunt-contrib-watch');

grunt.registerTask('dev',['uglify','watch']);}复制代码

在项目根目录下执行grunt dev,就会启动javascript文件压缩和自动刷新功能。

grunt的优点是灵活，只负责我们定义的任务大量可复用组件分装好了常见的构建任务。grunt的缺点是集成度不高，要写好多配置后才可以使用。

gulp是一个基于流的自动化构建工具。除了可以管理和执行任务，还可以监听文件，读写文件。gulp通过下面五种方法支持所有的场景：

• gulp.task注册一个任务
• gulp.run执行任务
• gulp.watch监听文件的变化
• gulp.src读取文件
• gulp.dest写文件

gulp的最大特点是引入流的概念，同时提供了一系列的插件去处理流，流可以在插件直接传递

//引入gulp

var gulp = require('gulp');

//引入插件

var jshint = require('gulp-jshint');

var sass = require('gulp-sass');

var concat = require('gulp-concat');

var uglify = require('gulp-uglify');

//编译scss任务

gulp.task('sass',function(){
//读取文件

gulp.src('./scss/*.scss').pipe(sass()).pipe(gulp.dest('./css'))

})

复制代码

gulp的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。缺点是需要很多配置后才可以使用

webpack是一个打包模块化javascript的工具，在webpack里面一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个组合成的文件，javascript,css,scss,图片，模板，对于webpack来说都是一个个没款，这样的好处是能清晰描述各个模块之间的依赖关系。

module.exports={
//所有模块的入口，webpack从入口开始递归解析出所有依赖的模块

entry:'./app.js',

output:{
//将入口所依赖的所有模块打包成一个bundle,js输出

filename:'bundle,js'}}复制代码

webpack的优点：

• 专注于处理模块化的项目，能做到开箱即用；
• 通过plugin扩展，完整好用又灵活；
• 使用场景不限于web开发；
• 社区活跃并且不断的跟新；
• 良好的开发体验；

webpack的缺点是只用于采用模块化的开发项目，其他不适合使用。

转载于:https://juejin.im/post/5cb2a7c86fb9a06856567f54