构建工具 webpack grunt gulp使用简介

wabpack

详情

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，

此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

需要模块 webpack webpack-cli

webpack.config.js是一个普通的模块包，使用npm run build这个指令来运行这个配置文件;

可以配置快捷键为

"build":"webpack"    //打包

"watch": "webpack --watch"   //自动打包;

"start": "webpack serve"    //启动打包服务器; 需要模块webpack-dev-server;

webpack.config.js 简单的配置

enter  //入口文件的地址  打包文件的入口文件地址; {}|""|[]

output  //输出  打包之后文件输出的地址 文件名 文件路径 {}|{};
        {
            filenmae: [name]-bundle.js   //文件名设置
            path:path.resovle(__dirname,"dist") //文件保存的位置  默认为dist文件夹
        }

mode:development  //设置为开发环境   production生产模式;

module  //配置各种loader解析不同的资源;
    {
        rules:[{test:/\.txt$/,use:"file-loader"}]   //这里面配置各种loader test：匹配哪种类型的资源文件 use ：使用那种解析器 exclude:/node_modules/  查询的时候把规定文件排除在外;

            各种格式对应的loader:

            js，json 不需要配置loader;

            css  style-loader  css-loader  加载顺序不能乱;

            jpg|png|jpg|jpeg|gif|svg  file-loader 或者type:"asset/resource"  type 自带的一些解析方式;

            woff|woff2|eot|ttf|otf   file-loader 或者type:"asset/resource"

            xml    xml-loader

            csv   csv-loader
    }

plugins   配置使用的插件

 devServer   配置服务器

grunt

什么是grunt? 详情

grunt是一个构建工具（打包工具），可以对JS文件进行压缩，丑化，合并等一系列比较耗时，但没有技术含量的工作。一句话：让这些工作自动化。grunt是第一款流行的前端构建工具，目前仍有开发人员在使用，但当前最流行的前端构建工具是webpack

安装grunt脚手架

npm install  grunt-cli -g

安装grunt

npm install grunt --save-dev

在项目中添加配置文件Gruntfile.js 常见配置如下

// Gruntfile.js是grunt打包工具的一个入口文件，将来在此处编写打包的代码。本质上是一个模块包。文件名称是约定死Gruntfile.js。
// grunt形参用来打包其他资源。
module.exports = function (grunt) {
    // 怎么打包？调用任务。
    grunt.initConfig({
        // 配置任务
        // 丑化，压缩js
        uglify: {
            build: {
                src: 'src/app.js',
                dest: 'build/app.min.js'
            }
        },
        // 压缩css
        cssmin: {
            options: {
                mergeIntoShorthands: false,
                roundingPrecision: -1
            },
            target: {
                files: {
                    'build/static/common.min.css': ['src/static/common.css']
                }
            }
        },
        // less转换成css
        less: {
            development: {
                files: {
                    'build/static/source.css': 'src/static/source.less'
                }
            }
        }
    });

    // 加载包含 "uglify" 任务的插件。相当于webpeck中的各种loader
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-less');

    // 默认被执行的任务列表。
    grunt.registerTask('default', ['uglify', 'cssmin', 'less']);
}

gulp

详情
用自动化构建工具增强你的工作流程！

安装

npm install gulp-cli -g
npm install gulp -D

添加配置文件 gulpfile.js 同样是约定好的

// src用来获取源文件， dest用来输出目标文件, series把所有的任务合并成一个系列
const { src, dest, series } = require('gulp');
const gulp = require('gulp');
// 具体的gulp插件，每种插件做不同的任务，gulp-uglify插件丑化，压缩js
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');


// 定义任务，有两种定义方式：1。函数  2。 gulp.task()
function uglifyJS() {
    return src('src/app.js').pipe(uglify()).pipe(dest('build/'));  //pipe 管道
}

function concatJS() {
    return src('src/*.js').pipe(concat('all.js')).pipe(uglify()).pipe(dest('build/'));
}

exports.default = series(uglifyJS, concatJS);//j将所有任务顺序执行