1.Gulp和Webpack的基本区别
gulp基于‘流’; webpack基于‘万物皆为模块’:
gulp可以进行js,html,css,img的压缩打包,是自动化构建工具,可以将多个js文件或是css压缩成一个文件,并且可以压缩为一行,以此来减少文件体积,加快请求速度和减少请求次数;并且gulp有task定义处理事务,从而构建整体流程,它是基于流的自动化构建工具。
Webpack是前端构建工具,实现了模块化开发和文件处理。他的思想就是“万物皆为模块”,它能够将各个模块进行按需加载,不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。
2. Gulp安装
>全局的:npm i gulp -g 启动器
>本地的:npm i gulp 核心库
3. Gulp使用
新建项目名称gulp-project, npm init, 新建文件gulpfile.js, 然后全局和本地安装gulp。
(1) gulp压缩js
gulp-project下新建src, src下新建js文件夹,安装npm i gulp-uglify。
文件目录:
package.json:
{
"name": "gulp-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"gulp": "^3.9.1",
"gulp-uglify": "^3.0.1"
}
}
1.js:
function sum(a, b) {
var sumNum = a + b
console.log(sumNum)
}
sum(12, 13);
控制台运行gulp. src下就生成了dist目录以及压缩后的1.js
(2) gulp压缩合并
默认有多少文件就会压缩多少文件,有时候我们需要压缩合并。
npm install gulp-concat
const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
gulp.task('js', ()=>{
return gulp.src(['./src/js/*.js'])
.pipe(concat('bundle.min.js')) // concat会作合并,合并为1个js
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('default', ['js']);
(3) gulp bable编译
在1.js 里面写上es6的语法进行打包,就会报错。因为没有对es6的进行babel编译
const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
gulp.task('js', ()=>{
return gulp.src(['./src/js/*.js'])
// babel编译
.pipe(babel({
presets: ['@babel