Различия

Здесь показаны различия между двумя версиями данной страницы.

--- web_designe:sass:gulp [2020/01/26 15:23]
werwolf
+++ web_designe:sass:gulp [2023/01/12 12:18] (текущий)
@@ Строка 12: / Строка 12: @@
 ==gulpfile.js==
-<code javascript>
+<sxh javascript>
 var gulp = require('gulp');
@@ Строка 18: / Строка 18: @@
     console.log('hello world');
 });
-</code>
+</sxh>
-==комманда запуска==
+комманда запуска:
 <code powershell>
 >>>gulp hello
 </code>
+==выполнит сразу несколько вызовов==
+<sxhjavascript>
+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']);
+</sxh>
+комманда запуска:
+<code powershell>
+>>>gulp default
+</code>
+ или
+<code powershell>
+>>>gulp
+</code>
+----
+====Конфигурация для работы с sass====
+Уствновка необходимых пакетов
+<code powershell>
+>>>npm i -D gulp gulp-sass gulp-uncss gulp-concat gulp-sourcemaps gulp-autoprefixer gulp-plumber browser-sync
+</code>
+<sxh javascript; title: gulpfile.js>
+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>
+комманда запуска:
+<code powershell>
+>>>gulp default
+</code>

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

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

Различия

Инструменты страницы