前端构建工具的用法—gruntgulpbrowserifywebpack

Posted 2020-08-08

随着前端项目的飞速发展，项目越来越大、文件越来越多，前端工程化的工具也越来越多。下面介绍目前最流行的四种构建工具——grunt、gulp、browserify、webpack

所有的构建工具都是基于NodeJs和Npm，所以使用下面任何工具都需要安装Node

一、grunt

1、需要两个文件：

Gruntfile.js —— grunt执行任务文件：描述项目会执行的任务。

package.json —— 工程描述文件：描述项目基本信息，和项目中使用到的npm包信息，方便其他人了解项目信息、跑起来该项目。

2、安装grunt-cli命令环境和项目里面用到的grunt包

npm install grunt-cli -g

mac下面需要sudo：sudo npm install grunt-cli -g

npm install grunt --save-dev　　// --save-dev：表示该npm包在dev开发环境时需要用到，加这个会在package.json中自动增加相关包描述。

3、安装grunt任务相关的npm包

npm install xxx --save-dev

4、Gruntfile.js任务写法

module.exports = function(grunt){
    // 加载需要的任务包
    grunt.loadNpmTasks(‘grunt-contrib-less‘);
    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
    // 初始化任务
    grunt.initConfig({
        "less": {  //包名
            "a":{  //任务名
                "src": "a.less",
                "dest": "index.css"
            },
            "b":{
                "src": "b.less",
                "dest": "main.css"
            }
        },
        "uglify": {
            "a": {
                "src": "aa.js",
                "dest": "index.js"
            }
        }
    });

　　 // 注册多任务
　　 grunt.registerTask(‘abc‘, [‘less:a‘, ‘uglify‘]);

}

 总结：最早开始自动化构建前端项目的工具之一，极大提高前端开发过程中的开发效率、更加方便工程化的部署到线上以及优化了线上前端代码。

二、gulp

 

 

三、browserify

 

 

四、webpack