В этой статье рассматривается, как Gulp.js оптимизирует повторяющиеся задачи разработки CSS, повышая эффективность вашего рабочего процесса. В то время как текстовый редактор достаточно для веб -разработки, повторяющиеся задачи, решающие для современных веб -сайтов и оптимальная производительность, часто доказывают разочарование. К ним относятся: транспортировка, объединение файлов, министерство производственного кода и развертывание на различных серверах. Эти задачи, повторяющиеся с каждым изменением, могут стать все более обременительными.

]

, к счастью, Gulp.js автоматизирует эти процессы. Эта статья демонстрирует свое применение в автоматизации различных задач CSS: оптимизация изображений, компиляция SASS, обработка активов и внедрение, автоматическое префикс поставщика, удаление неиспользованных селекторов CSS, MINISICATION CSS, отчетность по размеру файлов, генерацию источников для разработки браузера DevTools и Live Brower, перезагрузка при изменениях исходного файла.

ключевые преимущества использования gulp.js: ]

]

• Automation: автоматизирует повторяющиеся задачи, такие как оптимизация изображения, компиляция SASS и MINIFICATE CSS. ]
• гибкость: использует JavaScript для конфигурации задачи, позволяя легко модифицировать на основе среды (разработка/производство). ]
• расширяемость: использует многочисленные плагины (например, gulp-imagemin , gulp-sass ) для расширенной функции. ]
• Live Reloading: интегрируется с BrowserSync для обновлений в реальном времени в нескольких браузерах и устройствах. ]
• Эффективное управление задачами: обрабатывает задачи последовательно или параллельно для оптимизированного времени сборки. ]
]

почему выберите Gulp?

существует много бегунов задач (Grunt, Webpack, Parcel, NPM-сценарии), но Gulp выделяется благодаря своей стабильности, скорости, обширной поддержке плагинов и конфигурации на основе JavaScript. Этот подход, основанный на коде, предлагает преимущества, что позволяет изменять условную модификацию вывода-например, удаление Sourcemaps во время окончательного развертывания.

]

Начиная:

В этом уроке используется Gulp 4. Убедитесь, что у вас установлены git и node.js. Клонировать пример проекта из GitHub:

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

перейти к

http: // localhost: 8000/ (или отображаемый внешний URL) в вашем браузере. ]

альтернативно, создайте новый проект:

]

]

установить node.js.
1. ]
установить Gulp Globally:
2. npm i gulp -cli -g ]
создать папку проекта (например,
3. my-gulp-project ).
инициализировать npm:
4. npm init
create
5. src подпапки для исходных файлов (Images, scss).
создать
6. build для скомпилированных файлов.
создать
7. index.html файл для тестирования. ]
]

установка модуля: ]

установить необходимые модули:

npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss browser-sync --save-dev

Gulpfile.js configuration (пример):

]

file Gulpfile.js

определяет задачи. Упрощенный пример фокусируется на оптимизации изображения и обработке CSS: ]

// glpfile.js (упрощенный пример) const gulp = require ('gulp'); const Imagemin = require ('Gulp-Imagemin'); const sass = require ('gulp-sass') (require ('sass')); // ПРИМЕЧАНИЕ: Использование DART-SASS const postcss = require ('Gulp-postcss'); const autoprefixer = require ('autoprefixer'); const cssnano = require ('cssnano'); // задача изображения Функциональные изображения () { return gulp.src ('src/images/*') .pipe (Imagemin ()) .pipe (Gulp.dest ('Build/Images')); } // задача CSS функция css () { return gulp.src ('src/scss/main.scss') .pipe (sass (). on ('error', sass.logerror)) .pipe (postcss ([autoPrefixer (), cssnano ()])))) .pipe (Gulp.dest ('build/css')); } exports.images = images; exports.css = css; exports.default = gulp.parallel (images, css); // запустить задачи в параллельных

// gulpfile.js (Simplified Example)

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass')(require('sass')); //Note: using dart-sass
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// Image task
function images() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('build/images'));
}

// CSS task
function css() {
  return gulp.src('src/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('build/css'));
}

exports.images = images;
exports.css = css;
exports.default = gulp.parallel(images, css); // Run tasks in parallel

Gulpfile.js

будет включать такие функции, как Sourcemaps, BrowserSync и более сложные плагины PostCSS. Обратитесь к исходному тексту для полного примера. ] не забудьте адаптировать пути файлов, чтобы соответствовать структуре проекта. Запустить

Gulp

в вашем терминале, чтобы выполнить задачи. Полный, подробный Gulpfile.js и дополнительные объяснения доступны в оригинальной статье. ]