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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

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

@alisa.bahringer 

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

  1. Установить необходимые пакеты:
1
npm install gulp gulp-sass gulp-autoprefixer gulp-clean-css gulp-concat gulp-rename --save-dev


  1. Создать задачу в Gulp для компиляции файлов SCCS в CSS:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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.

  1. Создать задачу в Gulp для объединения файлов CSS в один файл:
1
2
3
4
5
6
7
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.

  1. Создать задачу в Gulp для вставки CSS в HTML файл:
1
2
3
4
5
6
7
function html() {
  return gulp.src('src/*.html')
    .pipe(concat('index.html'))
    .pipe(gulp.dest('dist'))
}

exports.html = html;


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

  1. Создать задачу в Gulp, которая будет выполнять все вышеперечисленные задачи:
1
exports.default = gulp.series(styles, css, html);


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


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

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

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

@alisa.bahringer 

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


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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 в терминале, чтобы выполнить эти задачи.