Инструменты пользователя
web_designe:sass:gulp
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
web_designe:sass:gulp [2020/01/26 15:26] werwolf |
web_designe:sass:gulp [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 12: | Строка 12: | ||
| ==gulpfile.js== | ==gulpfile.js== | ||
| - | <code javascript> | + | <sxh javascript> |
| var gulp = require('gulp'); | var gulp = require('gulp'); | ||
| Строка 18: | Строка 18: | ||
| console.log('hello world'); | console.log('hello world'); | ||
| }); | }); | ||
| - | </code> | + | </sxh> |
| - | ==комманда запуска== | + | комманда запуска: |
| <code powershell> | <code powershell> | ||
| >>>gulp hello | >>>gulp hello | ||
| Строка 26: | Строка 26: | ||
| ==выполнит сразу несколько вызовов== | ==выполнит сразу несколько вызовов== | ||
| - | <code javascript> | + | <sxhjavascript> |
| var gulp = require('gulp'); | var gulp = require('gulp'); | ||
| Строка 38: | Строка 38: | ||
| gulp.task('default', ['hello', 'log']); | gulp.task('default', ['hello', 'log']); | ||
| - | </code> | + | </sxh> |
| - | комманда запуска | + | комманда запуска: |
| <code powershell> | <code powershell> | ||
| - | gulp default | + | >>>gulp default |
| </code> | </code> | ||
| или | или | ||
| <code powershell> | <code powershell> | ||
| - | D:\NodeJS\gulp>gulp | + | >>>gulp |
| </code> | </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> | ||
| + | |||
| + | |||
web_designe/sass/gulp.1580041571.txt.gz · Последние изменения: 2023/01/12 12:17 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
