glup和webpack的构建工具「终于解决」

首先都需要配置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());

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一起用。学习更多的知识应该建议去官网学习和相关的社区