构建工具 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将所有任务顺序执行

最后

以上就是害羞黑米为你收集整理的构建工具 webpack grunt gulp使用简介的全部内容，希望文章能够帮你解决构建工具 webpack grunt gulp使用简介所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。