1.目标
1.将sass转化为css
2.es6模块化export能够在浏览器上运行
2 gulp
2.1创建以下文件以及执行命令
1. npm i -g gulp
2. mkdir app
3. cd app
4. npm init
5. npm install --save-dev gulp-babel @babel/core @babel/preset-env gulp-sass sass gulp gulp-browserify
6. touch index.html gulpfile.js
7. mkdir src
8. cd src
9. touch index.js index.scss
第5的安装什么包，直接去plugins搜索
源文件index.js, index.scss(需要进行转化)
export const name = '你好'
console.log(name)
.father {
.son {
color: red;
}
}
gulpfile.js文件:
const gulp = require('gulp');
const babel = require('gulp-babel');
const sass = require('gulp-sass')(require('sass'));
const browserify = require('gulp-browserify');
// es6 -> es5
// 必须用加上browserify插件 (针对import, export等模块化的东西)
gulp.task('babel', () =>
gulp.src('src/index.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(browserify({
insertGlobals: true,
}))
.pipe(gulp.dest('dist'))
);
// sass -> css
function buildStyles() {
return gulp.src('./src/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./dist'));
};
exports.buildStyles = buildStyles;
2.2 执行任务
gulp babel buildStyles
.father .son {
color: red;
}
2.3效果
<div class="father">
<div class="son">哈哈哈哈</div>
</div>
<link rel="stylesheet" href="dist/index.css">
<script src="dist/index.js"></script>
3.webpack
3.1创建以下文件以及执行命令
1. npm i -g gulp
2. mkdir app
3. cd app
4. npm init
5. npm install --save-dev webpack-cli style-loader sass-loader sass css-loader node-sass babel-loader
6. touch index.html webpack.config.js index.js
7. mkdir src
8. cd src
9. touch index.js index.scss
index.js index.scss内容参考gulp的
webpack.config.js
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
// {
// test: /js$/, // 主要是将ES6或更高级别的无法转为ES5版本
// loader: 'babel-loader',
// }
],
},
};
3.2 执行任务
npx webpack
产生了dist文件
3.3效果
<div class="father">
<div class="son">哈哈哈哈</div>
</div>
<script src="dist/bundle.js"></script>
4区别
从上面两个列子看出，例如前端需要做一些图片压缩，es6模块化转es5，sass转化为css，写的代码能够在浏览器中运行，gulp和webpack都是通过下载npm包的方式,
gulp是通过编程的方式，而webpack是通过配置的方式
比如上面的gulp，如果我需要export const ....能够在浏览器运行，必须下载@babel/core @babel/preset-env gulp-browserify 这三个包，而webpack我注释掉了rules里面的babel-loader,打包之后正常运行,说明
Webpack很多功能都封装进了自己身体里面，使得自己强大同时臃肿,现在你可以在 ./index.js 文件里直接写 ES6 代码，因为webpack 把编译 ES6 的工作已经封装到自己的实现里了， 使得 webpack 看起来原生支持 ES6 而不需要借助第三方插件
gulp(任务运行器)通过任务的形式组织这些编译过程的，指定对什么文件用什么编译器(npm包)编译， 然后输出到哪个目录。并不参与具体的代码处理，具体处理啥文件，怎么处理都是开发者指定的。
任务之间可以规定先后顺序、串行并行。但因为每个任务都比较独立，很难做一些全局的优化。不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能
webpack从入口模块开始构建一棵依赖图，中间遇到的用到的 js、css、图片等都会作为他的依赖。然后对依赖图的每个节点分别用对应的编译器处理。
现在有了模块之间的依赖图了，那就可以做一些全局的优化
比如通过分析依赖关系来去掉一些没有用到的代码，这叫做 tree shaking。比如把这些模块拆分到不同的分组（chunk）里，然后生成不同的文件，这样把变动频繁的模块和不咋变动的模块分到不同的 chunk，进而生成到不同的文件里，就可以更好的利用缓存，这叫做 code splitting。 而且，因为生成的代码是自己控制的，有自己的 runtime 代码，那就可以配合 runtime 来实现一些功能，比如实现模块的 lazy load，也就是把 code splitting 分出来的 chunk，在运行时动态加载。
参考: 前端工程化
