gulp与webpack

姜学海

2023-12-01

Gulp与Webpack

gulp是什么?

是工具链是构造工具
旨在规范前端开发流程
可以配合各种插件做js压缩 css压缩 less编译
替代手动实现自动化工作
基于node强大的流(stream)能力,gulp在构建过程中并不把文件立即写入磁盘,从而提高了构建速度
gulp为高级编译程序可用组件很多
通过一系列插件将原本复杂繁琐的任务自动化
并不能将你的css等非js资源模块化
gulp是一个自动化任务的工具你可以通过gulp来配置webpack的文件

gulp有什么作用?

构建工具
自动化
提高效率

gulp如何安装?

//安装gulp 作为开发时依赖项
	yarn add gulp --dev
//启动server 可打开浏览器
	yarn add gulp-webserver --dev
//node-sass 是一个库 编译sass文件
	yarn add node-sass gulp-sass
//合并文件
	yarn add gulp-concat --dev
//编译js文件
    yarn add webpack-stream --dev

webpack是什么?

是文件模块化打包工具
可把项目中的各种js文件 css文件等打包
合成一个或者多个文件
主要用于模块化方案预编译模块的方案
庞大的社区 (资源丰富学习成本低)
webpack遵循commonJs的形式方便旧项目进行代码迁移
能被模块化的不仅仅是JS 所有的静态资源例如css 图片等都能模块化即以require方式引入

webpack有什么作用?

打包工具
模块化开发(import require)
组件式的开发
编译模块代码方案
主流框架脚手架支持(vue react angular)

//安装webpack  也可全局装 也可以@version
	cnpm install webpack --save-dev
//初始化 生成packjson文件
	npm init
//配置cli
    yarn add webpack webpack-cli -D
//需要配置一个webpack.config.js
//修改package.json 增加：
	"dev": "webpack"
//将编译出来的js文件 插入到模板文件中 也就是导入html页面中
	yarn add html-webpack-plugin  -D
//热更新
	yarn add webpack-dev-server -D
//解析scss文件 先用css-loader解析css文件 再调用style-loader打包
	yarn add css-loder style-loader -D
	yarn add sass-loader node-sass -D
//将第三方css文件编译到自己项目中
	yarn add copy-webpack-plugin -D

webpack的配置

```javascript

```javascript
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const copyPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  devtool: 'inline-source-map',
  output: {
    filename: 'index.min.js',
    path: path.resolve(__dirname, './dev')
  },
  devServer: {
    host: "0.0.0.0",
    open: true,
    port: 7099,
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {
          // "^/api": ""
        }
      },
      "/upload": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {
          // "^/api": ""
        }
      }
    }
  },
  plugins: [
    new htmlWebpackPlugin({
	//webpack-dev-server在内存中生成的文件名称 自动将		build注入到这个页面底部 才能实现自动刷新功能
      filename: 'index.html',
        //根据index.html这个模板来生成 'js导入'
      template: './src/index.html'
    }),
    new copyPlugin([{
      from: './src/static/', to: './static/'
    }])
  ],
  module: {
    rules: [
        //表示当前要打包的文件的后缀正则表达式
      { test: /\.html$/, loader: "string-loader" },
      {
        //匹配文件的后缀
        // 所有的.scss sass文件被此loader处理
        test: /\.s[ac]ss$/i,
        use: [
           这里也可以这么写
 //'style-loader!css-loader' 从右边向左边调用
          //从js字符串创建style节点
          // Creates `style` nodes from JS strings
          'style-loader',
          // MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ]
  }
}

webpack优势

首先，Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件，当然也具有一些编译功能，比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能，同时还具备模块化开发和组件式开发等优点，在目前流行的前端框架React和Vue中也得到很好的支持。

然后再说说Parcel，它一度被人认为是未来最有可能替代Webpack的前端打包工具，主要原因是它几乎零配置，而且打包入口也不仅仅只是JS，另外其打包速度也要比Webpack快。然而，虽然Parcel相比Webpack似乎具有更多优势，但它毕竟还不够成熟，没有Webpack庞大的社区，一旦遇到问题很难在网上快速找到相应解决办法。并且最近Webpack 4.0已经发布，配置相比之前简化了一些，也增加了一些新功能，所以我们完全有理由相信Webpack在未来也会越来越好。

因此，在经过一番体验和对比之后，最终我选择了Webpack。

插件含义

node-sass

它将node.js绑定到LibSass(流行样式预处理器Sass的c版本)
允许用户以令人难以置信的速度将.scss文件本地编译为css
并且通过中间件自动编译

gulp-sass

依赖于node-sass

gulp-ruby-sass

使用sass gem 编译sass 将结果输出到一个gulp流

dev save区别

npm install moduleName 命令

安装模块到项目node_modules目录下。
不会将模块依赖写入devDependencies或dependencies 节点。
运行 npm install 初始化项目时不会下载模块。

npm install - g moduleName 命令

安装模块到全局，不会在项目node_modules目录中保存模块包。
不会将模块依赖写入devDependencies或dependencies 节点。
运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令

安装模块到项目node_modules目录下。
会将模块依赖写入dependencies 节点。
运行 npm install 初始化项目时，会将模块下载到项目目录下。
运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令

安装模块到项目node_modules目录下。
会将模块依赖写入devDependencies 节点。
运行 npm install 初始化项目时，会将模块下载到项目目录下。
运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

总结

devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

你开发一个前端项目，在项目中你需要使用gulp构建你的开发和本地运行环境,这时你就要放到dependencies里。gulp是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。

你写程序要用element-ui,生产环境运行项目时肯定要用到element-ui,这时element-ui就应该安装到dependencies中去。