{% if some_variable == 2 %}
{% include "file1.twig" %}
{% else %}
{% include "file2.twig" %}
{% endif %}
{
"name": "mysite.local",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {
"bs-grid-system": "^2.0.3",
"jquery": "^3.3.1",
"normalize.css": "^8.0.1",
"tiny-slider": "^2.9.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.2.0",
"browser-sync": "^2.26.3",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.0.0",
"gulp-babel": "^8.0.0",
"gulp-changed-in-place": "^2.3.0",
"gulp-concat": "^2.6.1",
"gulp-plumber": "^1.2.1",
"gulp-sass": "^4.0.2",
"gulp-sequence": "^1.0.0",
"gulp-sourcemaps": "^2.6.4",
"gulp-twig": "^1.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "delphinpro <delphinpro@yandex.ru>",
"license": "MIT"
}
const gulp = require('gulp');
const sass = require('gulp-sass');
const twig = require('gulp-twig');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const plumber = require('gulp-plumber');
const sequence = require('gulp-sequence');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const changed = require('gulp-changed-in-place');
const bs = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src([
'./node_modules/normalize.css/normalize.css',
'./node_modules/tiny-slider/dist/tiny-slider.css',
'./src/sass/**/*.scss',
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'nested' }))
.pipe(autoprefixer())
.pipe(concat('main.css'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public_html/design/'))
.pipe(bs.stream())
;
});
gulp.task('js:vendor', function (done) {
gulp.src([
'./node_modules/jquery/dist/jquery.min.js',
'./node_modules/whatwg-fetch/dist/fetch.umd.js',
'./node_modules/tiny-slider/dist/min/tiny-slider.js',
])
.pipe(plumber())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(concat('vendor.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public_html/design/'))
.on('end', done)
;
});
gulp.task('js', function (done) {
gulp.src([
'./src/js/main.js',
'./src/js/**/*.js',
])
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(concat('main.js'))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./public_html/design/'))
.on('end', function () {
bs.reload();
done();
})
;
});
gulp.task('twig', function (done) {
gulp.src([
'./src/twig/*.twig',
])
.pipe(plumber())
.pipe(twig({
base: [__dirname],
}))
.pipe(changed({ firstPass: true }))
.pipe(gulp.dest('./public_html/'))
.on('end', function () {
bs.reload();
done();
})
;
});
gulp.task('serve', function () {
bs.init({
ui: false,
//proxy: 'mysite.local',
server : './public_html',
browser: ['chrome'],
});
// gulp.watch('./public_html/*.html').on('change', bs.reload);
gulp.watch('./src/sass/**/*.scss', ['sass']);
gulp.watch('./src/js/**/*.js', ['js']);
gulp.watch('./src/twig/**/*.twig', ['twig']);
});
gulp.task('default', sequence(['twig', 'sass', 'js', 'js:vendor'], 'serve'));
bootprintService
…
.done(function(){ cb() });
let services = [];
items.forEach((item) => {
services.push(new Promise((resolve, reject)=>{
bootprintService
...
.done(() => resolve());
}))
});
Promise.all(services)
.then(function(){ cb() })
$('[fill="#000"]').removeAttr('fill');
$('[fill="#000000"]').removeAttr('fill');
fill: currentColor
global.ROOT = 'корень проекта';
let config = {
root: {
build: 'dist'
}
};
config.copy = [
{ src: 'source/assets/**', dest: '/'},
{ src: 'source/assets/.htaccess', dest: '/'},
{ src: 'node_modules/tiny-slider/dist/tiny-slider.js', dest: '/design/js' },
{ src: 'node_modules/tiny-slider/dist/tiny-slider.css', dest: '/design/css' },
{ src: 'node_modules/cool-menu/dist/cool-menu.js', dest: '/design/js' },
{ src: 'node_modules/svg4everybody/dist/svg4everybody.js', dest: '/design/js' },
{ src: 'node_modules/vanilla-text-mask/dist/vanillaTextMask.js', dest: '/design/js' },
{ src: 'node_modules/tippy.js/dist/tippy.all.min.js', dest: '/design/js' },
];
function copyFiles(conf, options) {
return new Promise((resolve, reject) => {
if (!('src' in conf)) reject('Invalid config for "copy" task: undefined "src" param');
if (!('dest' in conf)) conf.dest = '';
if ('extensions' in conf) { }
let source = path.join(global.ROOT, conf.src);
let dest = path.join(global.ROOT, options.root.build, conf.dest);
let pipeline = gulp.src(source).pipe(gulp.dest(dest));
pipeline.on('error', function (err) {
reject(err);
});
pipeline.on('end', function () {
resolve();
});
});
}
gulp.task('copy', function(done){
let copies = [];
options.copy.forEach(item => {
copies.push(copyFiles(item, options));
});
Promise.all(copies).then(value => done(), reason => done());
});
gulp.task(
'sometask', // название задачи
['anothertask'], // выполнить перед задачей
function(){} // сама задача
)
gulp.task(
'sometask', // название задачи
gulp.series( // последовательно выполнить
'anothertask', // другие задачи
function(){} // и саму задачу
)
)
gulp.task(
'sometask', // название задачи
gulp.series('anothertask'), // выполнить другие задачи
function(){} // и саму задачу
)
gulp.task('build', gulp.parallel('clean', 'nunjucks', 'sass', 'scripts', 'css-libs', 'img'), function(cb) {
var buildHtml = gulp.src('app/*.html')
.pipe(gulp.dest('dist'))
.on('end', function(){
cb();// сигналим о завершении
})
gulp.task('clean', function(cb) {
del('dist').then( (paths) => {
cb(); // сигналим о завершении
});
});
gulp.series(
'clean',
gulp.parallel(все остальное)
)
$primary: red;
@import 'vars.scss';
…
gulp.task('mytask', function(done){
let pipes = [];
pipes.push(new Promise((resolve, reject) => {
gulp.src(...)
.pipe()
…
.on('error', (err) => reject(err))
.on('end', () => resolve())
}));
//... повторить нужное кол-во раз
Promise.all(pipes).then((ok) => done(), (err) => done())
})
var plumber = require('gulp-plumber'); //+
gulp.task('js:build', function () {
gulp.src(path.src.js)
.pipe(plumber()) // +
.pipe(rigger())
.pipe(gulp.dest(path.build.js))
.pipe(reload({
stream: true
}));
});
gulp.task('sass', function() {
return gulp.src(paths.src.sass)
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass(sassConfig))
.on('error', notify.onError(errorHandlerFunction))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.dist.css))
.pipe(reload({stream: true}))
;
});
// Подключаем библу
const browserSync = require('browser-sync').create(); // create!!!
// Инициализируем сервер
browserSync.init(settings);
// для отслеживания изменений юзаем watch
// который ЗАПУСКАЕТ ЗАДАЧУ, а не перезагружает страницу!!!
gulp.watch(paths.watch.js).on('change', ['pug']);
// А уже в самой задаче, по ее окончанию, вызываем перезагрузку страницы
.pipe(browserSync.reload)
// А стили можно инъектить вообще без перезагрузки страницы:
.pipe(browserSync.stream())