Оглавление:
Карта сайта:
Оглавление:
Карта сайта:
Это старая версия документа!
>>>npm install gulp-cli -g >>>npm install gulp -D >>>touch gulpfile.js >>>gulp --help
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
Уствновка необходимых пакетов
>>>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