glup和webpack的构建工具

墨蓝 2023-06-16 07:58 14阅读 0赞

首先都需要配置node.js  
安装node.js  
安装：下载链接：https://nodejs.org/en/  
node -v查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。  
npm -v查看npm的版本号  
npm是在安装node.js时一同安装的node.js包管理器  
cd定位到目录，用法：cd + 路径 ；  
ls列出文件列表；  
clear清空命令提示符窗口内容  
npm的介绍  
npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）  
使用npm安装插件：命令提示符执行npm install \[-g\] \[–save-dev\]  
node插件名称。例：npm install gulp-less –save-dev  
g：全局安装。将会安装在C:\\Users\\Administrator\\AppData\\Roaming\\npm，并且写入系统环境变量； 非全局安装：将会安装在当前定位目录； 全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node\_modules文件夹下，通过require()调用；  
save：将保存配置信息至package.json（package.json是nodejs项目配置文件）  
\-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等  
为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install –production只下载dependencies节点的包）  
安装gulp  
全局安装：命令提示符执行 npm install gulp -g；ps: 尝试使用root用户 sudo npm install gulp -g  
作为项目的开发依赖（devDependencies）安装：npm install –save-dev gulp查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装。  
新建gulpfile.js文件（重要）  
举例压缩css/js  
基础配置  
var gulp = require(‘gulp’),  
//本地安装gulp所用到的地方  
minifycss = require(‘gulp-minify-css’),  
concat = require(‘gulp-concat’),  
uglify = require(‘gulp-uglify’),  
rename = require(‘gulp-rename’),  
del = require(‘del’);  
压缩css  
gulp.task(‘minifycss’, function() \{  
gulp.src(‘weui/css/*.css’) //压缩的文件  
.pipe(minifycss()) //执行压缩  
.pipe(gulp.dest(‘release/css’)) ; //输出文件夹  
\});  
压缩js  
gulp.task(‘minifycss’,function () \{  
gulp.src('weui/js/*.js’) //压缩的文件  
.pipe(uglify()) //压缩  
.pipe(gulp.dest(‘release/js’)); //输出  
\})  
Webpack  
全局安装  
npm install --global webpack  
本地安装  
npm install webpack  
初始化项目结构信息，并生成package.json进行记录 npm init  
目录结构  
build文件夹是打包后生成的目录，我们只需要手动创建  
app文件夹（用于存放源js、css文件）；  
public文件夹（用于存放源html模板）；  
webpack.config.js（webpack配置的默认文件;  
创建并编写源代码文件  
// Greeter.js  
module.exports = function() \{  
var greet=document.createElement(‘div’); greet.textContent = “Hi there and greetings!”; return greet; \};  
//main.js  
import ‘./style.scss’ const greeter = require(’./Greeter.js’); document.querySelector("\#root").appendChild(greeter());

<%= htmlWebpackPlugin.options.title %>

css或者scss等样式文件、以及图标、字体、图片等文件需要在入口文件导入（例如此处为main.js文件）  
注意的几个点：  
css或者scss等样式文件、以及图标、字体、图片等文件需要在入口文件导入（例如此处为main.js文件）  
html中的title标签可以用<%= htmlWebpackPlugin.options.title %>代替（后续会在webpack配置文件中定义title并插入这里）  
安装依赖包  
npm install （依赖包名称）–save-dev  
注意点  
需要打包scss，则需要安装node-sass和sass-loader（同理，如果需要使用其他预编译处理文件，可以去查一下相关的依赖包）  
打包css样式相关的插件：（–save-dev是将插件添加到devDependencies中）  
css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；  
style-loader将所有的计算后的样式加入页面中；  
二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。  
file-loader 就是将文件（一般是图片文件为主，其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中；  
html-webpack-plugin插件用于打包html文件就是原本我们在打包完js、css文件之后，还需要在html中手动引入。而该插件能帮助我们在生成css、js文件的同时将这些文件自动引入到我们的输出html文件中（一般来说，我们使用这个插件的时候，需要在配置中为它提供源模板、文件名、chunk等等，可以参考后面的配置文件代码  
为了让打包后样式生效，有两种方法  
一种是使用style-loader自动将css代码放到生成的style标签中插入到head标签里。  
另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包（打包输出的文件由配置文件中的output属性指定）。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件因此要将css文件和js文件打包的时候独立分开，可以使用extract-text-webpack-plugin插件（注意！！！在这里说明一点，该插件可以说是服务于webpack4之前的版本，而在webpack4+版本以后已经有mini-css-extract-plugin插件来代替它注意一点，鉴于刚刚提到的webpack 4+版本问题问题影响，使用extract-text-webpack-plugin插件可能会发生版本相关问题的报错，如果还是要使用该插件，此时我们也可以运行以下命令解决：  
npm install extract-text-webpack-plugin@next --save-dev  
webpack配置文件编写  
本测试项目的  
webpack.config.js代码  
const path = require(‘path’);  
var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);  
// 将css样式从js文件中分离出来  
var HtmlWebpackPlugin = require(‘html-webpack-plugin’); /  
/ 打包html的插件  
module.exports = \{ entry: \{ bundle: \_\_dirname + ‘/app/main.js’ // 入口文件 \},  
output: \{ path: path.resolve(\_\_dirname, ‘./build’), // 打包后的文件存放的地方  
filename: “./js/\[name\].js” // 打包后输出文件的文件名 \},  
module: \{ rules: \[\{ test: /.(sa|sc|c)ssKaTeX parse error: Expected 'EOF', got '\}' at position 58: …ass-loader', \] \}̲, \{ test: /\\.(…/, use: \[\{ loader: ‘file-loader’, options: \{ name: ‘\[name\].\[ext\]’, outputPath: ‘./img’ \} \} \] \},  
\{ test: /.(woff|woff2|eot|ttf|otf)$/, use: \[\{ loader: ‘file-loader’, options: \{ name: ‘font/\[name\].\[ext\]’, outputPath: ‘./fonts’ \} \}\] \} \] \},  
plugins: \[ new ExtractTextPlugin("./css/base.css"),  
// 提取出来的样式放在base.css文件中  
new HtmlWebpackPlugin(\{ // 用于打包html文件 title: ‘Webpack test01’, // HTML title filename:‘index.html’, // 打包后的HTML文件名 template:‘public/index.html’ // 模板路径以及文件 \}) \] \}  
总结  
gulp是基于流的自动化构建工具，但不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能。二者侧重点不同，我认为相互结合使用会提高代码质量和代码的优化。  
gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。学习更多的知识应该建议去官网学习和相关的社区