Инструменты пользователя

Инструменты сайта


web_designe:sass:gulp

Это старая версия документа!


Использование gulp

Установка

>>>npm install gulp-cli -g
>>>npm install gulp -D
>>>touch gulpfile.js
>>>gulp --help
gulpfile.js
var gulp = require('gulp');
 
gulp.task('hello', function(){
    console.log('hello world');
});

комманда запуска:

>>>gulp hello
выполнит сразу несколько вызовов
var gulp = require('gulp');
 
gulp.task('hello', function(){
    console.log('hello world');
});
gulp.task('log', function(){
    console.log('hello world again');
});
 
 
gulp.task('default', ['hello', 'log']);

комманда запуска:

>>>gulp default

или

>>>gulp

Конфигурация для работы с sass

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

>>>npm i -D gulp gulp-sass gulp-uncss gulp-concat gulp-sourcemaps gulp-autoprefixer gulp-plumber browser-sync

<sxh javascript> const gulp = require('gulp'); const sass = require('gulp-sass'); const uncss = require('gulp-uncss'); const concat = require('gulp-concat'); const sourcemaps = require('gulp-sourcemaps'); const autoprefixer = require('gulp-autoprefixer'); const browserSync = require('browser-sync').create(); const plumber = require('gulp-plumber');/*Продолжаем отслеживание в случае ошибки компиляции*/

gulp.task('sass', function () {

  return gulp.src('src/sass/**/*.*)
      .pipe(plumber())  /*Продолжаем отслеживание в случае ошибки компиляции*/
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(concat('bundle.css'))
      .pipe(autoprefixer())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('public'))
      .pipe(browserSync.stream());

});

gulp.task('html', function(){

  return gulp.src('src/*.html')//перетаскиваем html в папку public
      .pipe(gulp.dest('public'));

});

gulp.task('serve', function () {

  browserSync.init({
      server: {
          baseDir: './public'
      }
  });
  gulp.watch('src/sass/%%**%%/%%*%%.sass', ['sass']);
  gulp.watch('src/%%*%%.html', ['html']);
  gulp.watch('public/index.html').on('change', browserSync.reload);

});

gulp.task('default', ['sass','html', 'serve']);

</sxh >

комманда запуска:

>>>gulp default
web_designe/sass/gulp.1580046663.txt.gz · Последние изменения: 2023/01/12 12:17 (внешнее изменение)