基于流的自动化构建-Gulp

冯和硕

2023-12-01

参考：
中文官网：https://www.gulpjs.com.cn/
英文官网：http://gulpjs.com/
什么是gulp:
Gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；他不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。
Gulp核心概念：流
流：简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如：读取数据，写入数据等。程序员是对流进行所有的操作，而不用关心流的另一头数据的真正流向。
Gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。
Gulp的特点：
易于使用：通过代码优于配置的策略，Gulp让简单的任务简单，复杂的任务可简单化
构建快速：利用node.js流的威力，你可以快速构建项目并减少频繁的IO操作
易于学习：通过最少的API，掌握Gulp毫不费力，构建工作尽在掌握：如同一系列流管道。

一、gulp常用命令

初始化项目文件

yarn init

安装gulp

yarn add gulp --dev

安装gulp-sass 编译sass相关文件

yarn add gulp-sass --dev
//使用
const style = () =>{
  return src('src/assets/styles/*.scss',{base:'src'})
        .pipe(plugins.sass({outputStyle:'expanded'})) // }换行
        .pipe(dest('dist'))
}

编译 script(js) 相关文件

yarn add gulp-babel --dev  
yarn add @babel/core @babel/preset-env --dev   （依赖于babel）
//使用
const script = () =>{
  return src('src/assets/scripts/*.js',{base:'src'})
        .pipe(plugins.babel({presets:['@babel/preset-env']})) 
        .pipe(dest('dist'))
}

编译html文件

yarn add gulp-swig --dev  
//使用
const page = () =>{
  return src('src/*.html',{base:'src'})
        .pipe(plugins.swig({data}))
        .pipe(dest('dist'))
}

编译图片

 yarn add gulp-imagemin --dev

清除文件（不是gulp，但是gulp能使用）

 yarn add del --dev
 //使用
 const clean = () => {
  return del(['dist'])
}

编译图片

 yarn add gulp-imagemin --dev
 // 使用
 const image = () =>{
  return src('src/assets/images/**',{base:'src'})
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}
// 编译字体
const font = () =>{
  return src('src/assets/fonts/**',{base:'src'})
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}

自动加载所有插件，不需要手动一个一个引入

yarn add gulp-load-plugins --dev
// 使用
const extra = () => {
  return src('public/**',{ base : 'public'})
        .pipe(dest('dist'))

}

提供一个开发服务器，热更新到浏览器中

yarn add browser-sync --dev

watch监听

const serve = () =>{
  watch('src/assets/styles/*.scss',style),
  watch('src/assets/scripts/*.js',script),
  watch('src/*.html',page),
  // watch('src/assets/images/**',image),
  // watch('src/assets/fonts/**',font),
  // watch('public/**',extra),
  bs.init({
    notify:false,
      port:7777,
      files:'dist/**',
    server:{
      baseDir:['dist','src','public'],
      routes:{
        '/node_modules':'node_modules'
      }
    }
  })
}

parallel 同时编译

const compile = parallel(style,script,page)

series 依次编译

const build = series(clean,parallel(compile,image,font,extra)) 
const develop= series(compile,serve)

执行命令

yarn gulp module.exports里抛出的
例如:
yarn gulp develop
yarn gulp clean  
 … …

二、gulpfile.js 文件

const {src,dest,parallel,series,watch} = require('gulp')  // parallel 同时编译，不浪费时间
const del = require('del')
const browsersync = require('browser-sync')

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = browsersync.create()
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],}

const clean = () => {
  return del(['dist'])
}
  
const style = () =>{
  return src('src/assets/styles/*.scss',{base:'src'})
        .pipe(plugins.sass({outputStyle:'expanded'})) // }换行
        .pipe(dest('dist'))
}
const script = () =>{
  return src('src/assets/scripts/*.js',{base:'src'})
        .pipe(plugins.babel({presets:['@babel/preset-env']})) 
        .pipe(dest('dist'))
}

const page = () =>{
  return src('src/*.html',{base:'src'})
        .pipe(plugins.swig({data}))
        .pipe(dest('dist'))
}
const image = () =>{
  return src('src/assets/images/**',{base:'src'})
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}
const font = () =>{
  return src('src/assets/fonts/**',{base:'src'})
        .pipe(plugins.imagemin())
        .pipe(dest('dist'))
}
const extra = () => {
  return src('public/**',{ base : 'public'})
        .pipe(dest('dist'))

}
const serve = () =>{
  watch('src/assets/styles/*.scss',style),
  watch('src/assets/scripts/*.js',script),
  watch('src/*.html',page),
  // watch('src/assets/images/**',image),
  // watch('src/assets/fonts/**',font),
  // watch('public/**',extra),
  bs.init({
    notify:false,
      port:7777,
      files:'dist/**',
    server:{
      baseDir:['dist','src','public'],
      routes:{
        '/node_modules':'node_modules'
      }
    }
  })
}
const compile = parallel(style,script,page)

// 上线之前执行
const build = series(clean,parallel(compile,image,font,extra)) 

//
const develop= series(compile,serve)

module.exports = {
  clean,
  build,
  serve,
  develop
}

三、一些常用的gulp插件

1. 自动加载插件

yarn add gulp-load-plugins --dev

2.重命名
用来重命名文件流中的文件。用gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用gulp-rename插件来改变文件流中的文件名。

 yarn add gulp-rename --dev

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    uglify = require("gulp-uglify");
 
gulp.task('rename', function () {
    gulp.src('js/jquery.js')
    .pipe(uglify())  //压缩
    .pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
    .pipe(gulp.dest('js'));
    //关于gulp-rename的更多强大的用法请参考https://www.npmjs.com/package/gulp-rename
});

3.js文件压缩
用来压缩js文件，使用的是uglify引擎

yarn add gulp-uglify --dev

var gulp = require('gulp'),
    uglify = require("gulp-uglify");
 
gulp.task('minify-js', function () {
    gulp.src('js/*.js') // 要压缩的js文件
    .pipe(uglify())  //使用uglify进行压缩
    .pipe(gulp.dest('dist/js')); //压缩后的路径
});

4.css文件压缩
要压缩css文件时可以使用该插件

yarn add gulp-minify-css --dev

var gulp = require('gulp'),
    minifyCss = require("gulp-minify-css");
 
gulp.task('minify-css', function () {
    gulp.src('css/*.css') // 要压缩的css文件
    .pipe(minifyCss()) //压缩css
    .pipe(gulp.dest('dist/css'));
});

5.html文件压缩

yarn add gulp-minify-html --dev

var gulp = require('gulp'),
    minifyHtml = require("gulp-minify-html");
 
gulp.task('minify-html', function () {
    gulp.src('html/*.html') // 要压缩的html文件
    .pipe(minifyHtml()) //压缩
    .pipe(gulp.dest('dist/html'));
});

6.文件合并
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了

yarn add gulp-concat --dev

var gulp = require('gulp'),
    concat = require("gulp-concat");
 
gulp.task('concat', function () {
    gulp.src('js/*.js')  //要合并的文件
    .pipe(concat('all.js'))  // 合并匹配到的js文件并命名为 "all.js"
    .pipe(gulp.dest('dist/js'));
});

7. less和sass的编译
less：

yarn add gulp-less --dev

var gulp = require('gulp'),
    less = require("gulp-less");
 
gulp.task('compile-less', function () {
    gulp.src('less/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/css'));
});

sass：

yarn add gulp-sass --dev

var gulp = require('gulp'),
    sass = require("gulp-sass");
 
gulp.task('compile-sass', function () {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

8.图片压缩
gulp-imagemin 用来压缩jpg、png、gif等图片

yarn add gulp-imagemin --dev

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件

gulp.task('default', function () {
    return gulp.src('src/images/*')
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant来压缩png图片
        }))
        .pipe(gulp.dest('dist'));
});

如对gulp还有什么不明白之处，或者本文有什么遗漏或则错误，欢迎一起留言一起交流~

基于流的自动化构建-Gulp

一、gulp常用命令

二、gulpfile.js 文件

三、一些常用的gulp插件

相关阅读

相关文章

相关问答

相关文档