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'])
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(concat('bundle.min.js'))    // concat会作合并，合并为1个js
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'));
});

gulp.task('default', ['js']);

(4) gulp 压缩css

npm install gulp-cssmin

const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
const cssmin=require('gulp-cssmin');

gulp.task('js', ()=>{
  return gulp.src(['./src/js/*.js'])
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // concat会作合并，合并为1个js
    .pipe(concat('bundle.min.js'))    
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'));
});


gulp.task('style', ()=>{
    return gulp
      .src(['./src/css/**/*.css'])
      .pipe(concat('style.min.css'))
       // cssmin css压缩
      .pipe(cssmin())
      .pipe(gulp.dest('./dist/css/'));
  });


gulp.task('default', ['js', 'style']);

(5). gulp  sourcemap源码解析

经过压缩的代码如果语法出了错， 开发者很难定位哪里出了错。用sourcemap就可以源码反解析，很容易代码定位错误的地方

 

npm install gulp-sourcemaps

const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
const cssmin=require('gulp-cssmin');
const sourcemaps=require('gulp-sourcemaps');

gulp.task('js', ()=>{
  return gulp.src(['./src/js/*.js'])
    .pipe(sourcemaps.init())
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // concat会作合并，合并为1个js
    .pipe(concat('bundle.min.js'))    
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js/'));
});


gulp.task('style', ()=>{
    return gulp
      .src(['./src/css/**/*.css'])
      .pipe(concat('style.min.css'))
       // cssmin css压缩
      .pipe(cssmin())
      .pipe(gulp.dest('./dist/css/'));
  });


gulp.task('default', ['js', 'style']);

(6). gulp 压缩图片

npm install gulp-imagemin

const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
const cssmin=require('gulp-cssmin');
const sourcemaps=require('gulp-sourcemaps');
const imagemin=require('gulp-imagemin');

gulp.task('js', ()=>{
  return gulp.src(['./src/js/*.js'])
    .pipe(sourcemaps.init())
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // concat会作合并，合并为1个js
    .pipe(concat('bundle.min.js'))    
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js/'));
});


gulp.task('style', ()=>{
    return gulp
      .src(['./src/css/**/*.css'])
      .pipe(concat('style.min.css'))
       // cssmin css压缩
      .pipe(cssmin())
      .pipe(gulp.dest('./dist/css/'));
});

gulp.task('image', ()=>{
    return gulp
        .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])
        .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.jpegtran({propressive: true}),
        imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest('./dist/img/'));
});


gulp.task('default', ['js', 'style', 'image']);

(7). gulp watch

每次都手动执行 gulp命令。是不是很烦，gulp有watch功能，当js代码改变后自动触发编译

const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
const cssmin=require('gulp-cssmin');
const sourcemaps=require('gulp-sourcemaps');
const imagemin=require('gulp-imagemin');

const js_path=['./src/js/**/*.js'];

gulp.task('js', ()=>{
  return gulp.src(js_path)
    .pipe(sourcemaps.init())
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // concat会作合并，合并为1个js
    .pipe(concat('bundle.min.js'))    
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js/'));
});


gulp.task('style', ()=>{
    return gulp
      .src(['./src/css/**/*.css'])
      .pipe(concat('style.min.css'))
       // cssmin css压缩
      .pipe(cssmin())
      .pipe(gulp.dest('./dist/css/'));
});

gulp.task('image', ()=>{
    return gulp
        .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])
        .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.jpegtran({propressive: true}),
        imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest('./dist/img/'));
});

gulp.task('watch', ()=>{
    gulp.watch(js_path, ['js']);
});

gulp.task('default', ['js', 'style', 'image', 'watch']);

控制台输入gulp watch， 改变js代码就会重新编译。

 

(8) livereload

8.1、说明：谷歌浏览器安装插件需要FQ，我已经下载了最新版本2.1.0到本地，点击下载（谷歌为.crx文件，火狐为.xpi文件）

8.2、安装方法：谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装

8.3、命令行执行： gulp watch

8.4、以服务器的方式打开页面，例如http://localhost:4444，而不是file:///D:/gulp-project/src/index.html，否则无法启动livereload浏览器插件

8.5、点击livereload浏览器插件即可启动，如下图：

 

如果不想安装插件也可以用node起个服务， 或者vscode下载Live Server:

命令行执行：gulp

点击vscode的Go Live即可：

 

 

附上完整代码：

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": {
        "@babel/core": "^7.1.6",
        "@babel/preset-env": "^7.1.6",
        "gulp": "^3.9.1",
        "gulp-babel": "^8.0.0",
        "gulp-uglify": "^3.0.1",
        "gulp-concat": "^2.6.1",
        "gulp-cssmin": "^0.2.0",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-imagemin": "^5.0.3",
        "gulp-livereload": "^4.0.0"
    }
}

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../dist/css/style.min.css" type="text/css"/>
    <script>
    document.write(`<script src="../dist/js/bundle.min.js?t=${Math.random()}" charset="utf-8"></sc`+`ript>`)
    </script>
  </head>
  <body>
    aaabbbbdfasd1111
    <div class="div1">22222</div>
  </body>
</html>

gulpfile.js

const gulp=require('gulp');
const uglify=require('gulp-uglify');
const concat=require('gulp-concat');
const babel=require('gulp-babel');
const cssmin=require('gulp-cssmin');
const sourcemaps=require('gulp-sourcemaps');
const imagemin=require('gulp-imagemin');
const livereload=require('gulp-livereload');

const js_path=['./src/js/**/*.js'];

gulp.task('js', ()=>{
  return gulp.src(js_path)
    .pipe(sourcemaps.init())
    // babel编译
    .pipe(babel({
        presets: ['@babel/env']
    }))
    // concat会作合并，合并为1个js
    .pipe(concat('bundle.min.js'))    
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/js/'))
    .pipe(livereload());
});


gulp.task('style', ()=>{
    return gulp
      .src(['./src/css/**/*.css'])
      .pipe(concat('style.min.css'))
       // cssmin css压缩
      .pipe(cssmin())
      .pipe(gulp.dest('./dist/css/'))
      .pipe(livereload());
});

gulp.task('image', ()=>{
    return gulp
        .src(['./src/img/**/*.jpg', './src/img/**/*.gif', './src/img/**/*.png'])
        .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.jpegtran({propressive: true}),
        imagemin.optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest('./dist/img/'));
});

gulp.task('watch', ()=>{
    //开启livereload的服务
    livereload.listen();
    gulp.watch(js_path, ['js']);
    let css_path = ['./src/css/**/*.css']
    gulp.watch(css_path, ['style']);
    //监听html；标记文件修改
    gulp.watch([
        './src/index.html',
        ...js_path, ...css_path
    ], file=>{
        livereload.changed(file.path);
    });
});

gulp.task('default', ['js', 'style', 'image', 'watch']);

目录：