Применение gulp4 во фронтенд-инжиниринге

Gulp
Применение gulp4 во фронтенд-инжиниринге

предисловие

Блогер недавно подготовился к разработке библиотеки компонентов пользовательского интерфейса и столкнулся с проблемой: он хотел упаковать scss-файлы стилей компонентов отдельно, а не использовать webpack вместе с компонентами. Исследование показало, что gulp может решить эту проблему, поэтому было изучено применение gulp4 во фронтенд-инжиниринге.

1. Введение

  Gulp — это инструмент автоматизированного построения на основе потоков, который считывает и записывает данные на основе потока (потока) в nodeJs, что быстрее, чем прямое чтение и запись в файлы ввода-вывода grunt.
С помощью gulp мы можем автоматизировать тестирование, проверку, слияние, сжатие, форматирование файлов js/sass/less/css и отслеживать файлы для повторения указанных шагов после внесения изменений.
Самая большая разница между gulp и webpack заключается в том, что gulp не может быть модульным и упаковывать ресурсы, отличные от js, такие как css/less/image, такие как webpack.
Сцена, применимая к GULP: отдельный Sass/Less/CSS отдельно, сжатые изображения, сжатый HTML и т. д.

2. Установите глоток

Установить gulp глобально

$ npm install gulp -g

Установить как зависимости разработки проекта (devDependencies):
$ npm install gulp --save-dev

Проверьте версию gulp (примечание: gulp3 сильно отличается от gulp4, см. раздел 4 статьи)
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

Новый gulpfile.js
// 定义default任务（gulp4)
gulp.task('default', async() => { 
    await ...
});

Выполнить gulp (задача по умолчанию будет выполняться по умолчанию)

$ gulp

3. Общие API

  • gulp.src(globs[, options])
    читать файлы в каталоге
  • gulp.dest(path[, options])
    записать файл в каталог
  • gulp.task(name[, deps], fn)
    определить задачу глотка
  • gulp.pipe()
    Обработка объектных файлов через плагины
  • gulp.watch(glob [ opts], tasks) или gulp.watch(glob [ opts, cb])
    Контролирует файловую систему и может выполнять действия при изменении файлов
  • Gulp.Series (Task11, Task2, Task3) (Новое в Гулп4)
    выполнять задачи последовательно
  • gulp.parallel(task1, task2, task3) (новое в gulp4)
    Выполняйте задачи параллельно

4.gulp3 и glup4

Изменения gulp3 и gulp4 в основном отражаются в изменениях определения задач и системы выполнения.

4.1 Определение задачи и порядок выполнения в gulp3

Для задач в gulp3 задача выполняется только после последовательного выполнения зависимых задач задачи.

Определение задачи в gulp3:

// gulpfile.js文件
const gulp = require('gulp');

// 定义task1任务
gulp.task('task1', function() {
  console.log('task1');
});

// 定义task2任务
gulp.task('task2', function() {
  console.log('task2');
});

// 定义default任务，依赖于task1任务和task2任务
gulp.task('default', ['task1', 'task2'], function() {
  console.log('done');
});

Выполнение задачи в gulp3:

Порядок выполнения:
start task1 => finish task1 => start task2 => finish task2 => start default => finish default

4.2 Определение задачи и порядок выполнения в gulp4

В gulp4 определение задачи и зависимые методы выполнения в gulp3 больше не поддерживаются.
Предполагая, что определение задач все еще находится в режиме gulp3:

gulp.task('task1', function() {
  console.log('task1');
});

Выполнить задачу1 и сообщить об ошибке. Вы забыли сигнализировать о завершении асинхронного выполнения?

Решение: используйте async await для определения задач,

// 定义task1任务
gulp.task('task1', async() => {
  await console.log('task1');
});

Выполнить задачу1, задача выполнена успешно.

Выполнение задачи в gulp4 больше не использует зависимое выполнение, а последовательное выполнение (gulp.series) и параллельное выполнение (gulp.parallel) двумя способами.
(1) Последовательное (последовательное) выполнение, которое отличается от последовательного выполнения в gulp3, сначала запускает задачу по умолчанию, затем последовательно выполняет задачи task1 и task2 и, наконец, завершает задачу по умолчанию.

Если gulp4 примет метод зависимого выполнения, как в gulp3, будет сообщено об ошибке функции Task.

решение:
использоватьgulp.series('task1','task2')илиgulp.parallel('task1','task2')Альтернатива gulp3gulp.task('default', ['task1', 'task2'], function() {... })Способ.
серийное исполнение (gulp.series):

const gulp = require('gulp');

// 定义任务task1
gulp.task('task1', async() => {
  await console.log('task1');
});

// 定义任务task2
gulp.task('task2', async() => {
  await console.log('task2');
});

// 串行执行task1、task2任务
gulp.task('default', gulp.series('task1', 'task2'));

Результаты:

Порядок выполнения:
start default => start task1 => finish task1 => start task2 => finish task2 => finish default

(2) Параллельное выполнение: сначала запустите задачу по умолчанию, затем синхронно выполните параллельную задачу и, наконец, завершите задачу по умолчанию.

выполнять параллельно(gulp.parallel):

const gulp = require('gulp');

// 定义任务task1
gulp.task('task1', async() => {
  await console.log('task1');
});

// 定义任务task2
gulp.task('task2', async() => {
  await console.log('task2');
});

// 并行执行task1、task2任务
gulp.task('default', gulp.parallel('task1', 'task2'));

Результаты:

Порядок выполнения:
start default => start task1 => start task2 => finish task1 => finish task2 => finish default

Ключевые моменты:
1. Задачи, определенные в gulp4, определяются в асинхронном режиме ожидания.
2. Выполнение задачи в gulp4 имеет последовательный (gulp.series) и параллельное выполнение (gulp.parallel) выполнение зависимостей в gulp3 может быть реализовано путем рациональной настройки последовательного и параллельного режимов.

Далее мы обсудим, как использовать gulp для упаковки js, css, изображений, html и как написать конфигурацию gulp в рабочей среде и среде разработки.

5.gulp обнаруживает, конвертирует, упаковывает и сжимает js

Требуемые плагины:

  • gulp-eslint: обнаружение eslint
  • gulp-babel: вавилонское преобразование
  • gulp-concat: объединить файлы (js/css/html и т. д.)
  • gulp-uglify: сжать js

Функция реализации:
Выполните обнаружение eslint для main.js, hello.js и world.js в текущем каталоге, конвертируйте babel, объедините и сожмите их в app.min.js и выведите их в каталог dist.

const gulp = require('gulp');
const babel = require('gulp-babel'); // babel转换
const eslint = require('gulp-eslint'); // eslint检测
const concat = require('gulp-concat'); // 合并文件
const uglify = require('gulp-uglify'); // 压缩js
const del = require('del'); // 清空目录

// 合并压缩的文件
const jsFiles = ['./main.js', './hello.js', './world.js'];

// eslint任务，实现eslint检测和代码格式化
gulp.task('eslint', async() => {
  await gulp.src(jsFiles)
            .pipe(eslint())
            .pipe(eslint.format()) // 格式化
            .pipe(eslint.failAfterError()); // 报错
});

// clean任务，清空dist文件夹
gulp.task('clean', async() => {
  await del(['./dist/']);
});

// jsCompress任务，实现js转换、合并、压缩
gulp.task('jsCompress', async() => {
  await gulp.src(jsFiles)
            .pipe(babel({
              presets: ['@babel/env'] // es6转换为es5
            }))
            .pipe(concat('app.min.js')) // 合并为app.min.js
            .pipe(uglify()) // 文件压缩
            .pipe(gulp.dest('./dist/')) // 文件写入到dist文件夹
});

// 顺序执行clean、eslint、jsCompress任务
gulp.task('default', gulp.series('clean', 'eslint', 'jsCompress'));

Выполняем gulp, задача выполнена успешно:сгенерированный app.min.js в папке dist
 

6.gulp конвертировать, объединять, сжимать scss/css

Требуемые плагины:

  • gulp-sass: дерзкая компиляция
  • gulp-concat: объединить файлы
  • gulp-clean-css: сжать css

Функция реализации:
(1) Основные каталога CSS Main.scss, CSS STYLE.SCSS, а затем объединены для записи сжаты в каталог SCSSCSSS.
(2) Все файлы css в текущем каталоге объединяются и сжимаются в style.min.css и записываются в каталог dist.

const gulp = require('gulp');
const concat = require('gulp-concat'); // 合并文件
const cleanCss = require('gulp-clean-css'); // 压缩css
const sass = require('gulp-sass'); // sass编译
const del = require('del'); // 清空目录

// clean任务，清空dist目录
gulp.task('clean', async() => {
   await del(['./dist']);
});

// sass任务，实现scss文件编译、合并、压缩
gulp.task('sass', async() => {
  await gulp.src(['./main.scss', './style.scss'])
            .pipe(sass()) // sass编译
            .pipe(concat('scss.css')) // 合并为scss.css
            .pipe(cleanCss()) // 压缩css文件
            .pipe(gulp.dest('./dist'));
});

// css任务，实现css合并、压缩
gulp.task('css', async() => {
  await gulp.src(['./*.css'])
            .pipe(concat('style.min.css')) // 合并为style.min.css
            .pipe(cleanCss()) // 压缩
            .pipe(gulp.dest('./dist'));
});

// 先执行clean任务，再并行执行sass和css任务
gulp.task('default', gulp.series('clean', gulp.parallel('sass', 'css')));

Выполнить gulp, задача выполнена успешно

Файлы scss.css и style.min.css создаются в каталоге dist.
 

7.gulp сжать HTML, изображение

Требуемые плагины:

  • gulp-htmlmin: сжатие html
  • gulp-imagemin: сжатие изображений

Функция реализации:
(1) Реализовать выходные данные сжатия html в текущем каталоге в каталоге dist.
(2) Реализовать вывод текущего изображения png в каталог dist

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin'); // html压缩
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录

// clean任务，清空dist目录
gulp.task('clean', async() => {
  await del('./dist');
});

// html任务，压缩html文件代码
gulp.task('html', async() => {
  await gulp.src('./*.html')
            .pipe(htmlmin({ collapseWhitespace: true })) // 压缩去除空格
            .pipe(gulp.dest('dist'));
});

// image任务，压缩图片
gulp.task('image', async() => {
  await gulp.src('./*.png')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist'));
})

// 先串行执行clean任务，后并行执行html和image任务
gulp.task('default', gulp.series('clean', gulp.parallel('html', 'image')));

Выполнить gulp, задача выполнена успешно

Сжатые html-файлы и изображения создаются в каталоге dist.
 

8. Применение gulp в производственной среде и среде разработки

Во время разработки интерфейса среда разработки и конфигурация рабочей среды часто различаются:
Окружающая среда развития: начать локальную службу, поддержку отладки и горячего обновления.
Рабочая среда: сжатый и объединенный код используется для развертывания онлайн-среды.
Требуемые плагины:

  • del: очистить каталог
  • gulp-eslint: обнаружение кода eslint
  • gulp-babel: преобразование babel, преобразование кода es6 в es5
  • gulp-concat: объединить файлы
  • Gulp-uglify: сжатие JS
  • gulp-sass: дерзкая компиляция
  • gulp-clean-css: сжатие css
  • gulp-htmlmin: сжатие html
  • gulp-imagemin: сжатие изображений
  • gulp.connect: начать отладку службы сервера

Функция реализации:
(1) Реализовать обнаружение js eslint, преобразование babel, слияние и сжатие
(2) Реализовать компиляцию sass, слияние и сжатие css.
(3) Реализовать сжатие html
(4) Реализовать сжатие изображений
(5) Предварительный просмотр среды разработки, горячее обновление
(6) Упаковка каждого файла в рабочей среде

const gulp = require('gulp');
const babel = require('gulp-babel'); // es6转为es5语法
const eslint = require('gulp-eslint'); // eslint代码检测
const concat = require('gulp-concat'); // 文件合并
const uglify = require('gulp-uglify'); // js压缩
const sass = require('gulp-sass'); // sass编译
const htmlmin = require('gulp-htmlmin'); // html压缩
const connect = require('gulp-connect'); // 起server服务
const imagemin = require('gulp-imagemin'); // 图片压缩
const del = require('del'); // 清空目录
const cleanCss = require('gulp-clean-css'); // css压缩

// 清空dist目录
gulp.task('clean', async() => {
 await del(['./dist']);
});

// html压缩公共函数
const htmlMin = () => {
 return gulp.src('./index.html')
            .pipe(htmlmin(
                 {collapseWhitespace: true}
                 ))
            .pipe(gulp.dest('dist'));
};

// html:dev task，用于开发环境下，浏览器自动刷新
gulp.task('html:dev', async() => {
 await htmlMin().pipe(connect.reload());
});
// html:build task，用于生产环境
gulp.task('html:build', async() => {
 await htmlMin();
});

// sass转换、合并、压缩css公共函数
const cssMin = () => {
 return gulp.src(['./css/style.scss', './css/*.css'])
            .pipe(sass())
            .pipe(concat('style.min.css'))
            .pipe(cleanCss())
            .pipe(gulp.dest('./dist/css'))
};

// css:dev任务，用于开发环境
gulp.task('css:dev', async() => {
 await cssMin().pipe(connect.reload());
});
// css:dev任务，用于生产环境
gulp.task('css:build', async() => {
 await cssMin();
});

// js eslint检测、babel转换、合并、压缩公共函数
const jsMin = () => {
 return gulp.src('./js/*.js')
            .pipe(eslint())
            .pipe(eslint.format())
            .pipe(eslint.failAfterError())
            .pipe(babel({
               presets: ['@babel/env']
             }))
            .pipe(concat('main.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'));
};

// js:dev任务，用于开发环境
gulp.task('js:dev', async() => {
 await jsMin().pipe(connect.reload());
});
// js:build，用于生产环境
gulp.task('js:build', async() => {
 await jsMin();
});

// 图片压缩公共函数
const imageMin = () => {
 return gulp.src('./img/*.png')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/img'));
};

// image:dev任务，用于开发环境
gulp.task('image:dev', async() => {
 await imageMin().pipe(connect.reload());
});
// image:build任务，用于生产环境
gulp.task('image:build', async() => {
 await imageMin();
});

// server任务，目录为dist，入口文件为dist/index.html，port 8080
gulp.task('server', () => {
  connect.server(
   {
     root: './dist',
     port: 8080,
     livereload: true
   }
 )
});

// watch任务，监听源文件变化，执行对应开发任务
gulp.task('watch', () => {
 gulp.watch(['./css/*.css', './css/*.scss'], gulp.series('css:dev'));
 gulp.watch('./js/*.js', gulp.series('js:dev'));
 gulp.watch('./index.html', gulp.series('html:dev'));
 gulp.watch('./img/*.png', gulp.series('image:dev'));
});

// dev任务，启动开发环境
gulp.task('dev', gulp.series(gulp.parallel('watch', 'server')));

// build任务，用于生产环境下打包压缩源代码
gulp.task('build', gulp.series('clean', gulp.parallel('html:build', 'js:build', 'css:build', 'image:build')))

Скрипт дополняет команды dev и build в package.json в текущем каталоге:

"scripts": {
   "dev": "gulp dev",
   "build": "gulp build"
 },

воплощать в жизньnpm run dev, вы можете запустить режим разработки.Когда мы изменим исходные html, css, js и другие файлы, соответствующая задача упаковки будет переупакована, и браузер автоматически обновится.


воплощать в жизньnpm run build, исходный код в каталоге пакетов.
Папка dist содержит упакованные html, css, js, изображения и другие ресурсы.
 

Выше приведено применение gulp4 во фронтенд-инжиниринге, изученное блогерами. Я считаю, что после прочтения статьи у вас должно быть предварительное представление о gulp.Заинтересованные партнеры также могут рассмотреть возможность интеграции gulp в конфигурацию веб-пакета для повышения эффективности разработки.

адрес исходного кода

глоток китайский сайт:www.gulpjs.com.cn

(Друзья, которые считают, что это хорошо, могут поставить лайк за статью, и звезда github, большое спасибо ^_^)

Категории