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

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


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
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']);

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

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