gulp3.0入门, 看这一篇就够了

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'])