Как соединить sccs и html через gulp?

Пользователь

alisa.bahringer

от alisa.bahringer , в категории: JavaScript , 2 года назад

43 | 0

html

2 ответа

Пользователь

amber_moore

от amber_moore , 2 года назад

@alisa.bahringer

Для того, чтобы соединить файлы SCCS и HTML в Gulp, необходимо выполнить несколько шагов:

Установить необходимые пакеты:

1	npm install gulp gulp-sass gulp-autoprefixer gulp-clean-css gulp-concat gulp-rename --save-dev

Создать задачу в Gulp для компиляции файлов SCCS в CSS:

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const rename = require('gulp-rename');

function styles() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(cleanCSS())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('dist/css'));
}

exports.styles = styles;

Эта задача компилирует все файлы с расширением .scss в папке src/scss, применяет автопрефиксы и минифицирует CSS, а затем сохраняет их в папку dist/css.

Создать задачу в Gulp для объединения файлов CSS в один файл:

function css() {
  return gulp.src('dist/css/*.css')
    .pipe(concat('styles.css'))
    .pipe(gulp.dest('dist'));
}

exports.css = css;

Эта задача объединяет все файлы CSS в папке dist/css в один файл styles.css и сохраняет его в папке dist.

Создать задачу в Gulp для вставки CSS в HTML файл:

function html() {
  return gulp.src('src/*.html')
    .pipe(concat('index.html'))
    .pipe(gulp.dest('dist'))
}

exports.html = html;

Эта задача объединяет все файлы HTML в папке src в один файл index.html и сохраняет его в папке dist.

Создать задачу в Gulp, которая будет выполнять все вышеперечисленные задачи:

1	exports.default = gulp.series(styles, css, html);

Эта задача выполняет задачи styles, css и html в последовательности.

После выполнения этих шагов, запустите задачу в Gulp с помощью команды gulp в терминале, чтобы скомпилировать файлы SCCS в CSS, объединить файлы CSS в один файл и вставить его в HTML.

1 | 0

Пользователь

fidel

от fidel , 8 месяцев назад

@alisa.bahringer

Если вы хотите соединить файлы SCCS и HTML, вам не нужно создавать отдельную задачу для объединения файлов CSS в один. Просто скомпилируйте SCCS в CSS и вставьте полученный CSS в HTML.

Ниже приведен пример задачи, которая компилирует SCCS в CSS, добавляет префиксы и сохраняет CSS в папке dist, а затем вставляет его в HTML:

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const inject = require('gulp-inject');

function styles() {
  return gulp.src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(cleanCSS())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('dist/css'));
}

function injectCss() {
  return gulp.src('src/*.html')
    .pipe(inject(gulp.src('dist/css/*.css', {read: false}), {
      transform: function (filePath, file) {
        // return file contents as string
        return '<style>' + file.contents.toString('utf8') + '</style>';
      }
    }))
    .pipe(gulp.dest('dist'));
}

exports.styles = styles;
exports.injectCss = injectCss;

exports.default = gulp.series(styles, injectCss);

Эти задачи будут компилировать SCCS в CSS, добавлять префиксы, минифицировать CSS, сохранять его в папке dist/css и вставлять его в HTML файлы. Вы можете запустить gulp в терминале, чтобы выполнить эти задачи.

0 | 0

Как соединить sccs и html через gulp?

2 ответа

Похожие обсуждения: