You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.5 KiB
92 lines
2.5 KiB
2 years ago
|
let gulp = require('gulp'),
|
||
|
|
sass = require('gulp-sass')(require('sass')),
|
||
|
|
sourcemaps = require('gulp-sourcemaps'),
|
||
|
|
$ = require('gulp-load-plugins')(),
|
||
|
|
cleanCss = require('gulp-clean-css'),
|
||
|
|
rename = require('gulp-rename'),
|
||
|
|
postcss = require('gulp-postcss'),
|
||
|
|
autoprefixer = require('autoprefixer'),
|
||
|
|
postcssInlineSvg = require('postcss-inline-svg'),
|
||
|
|
browserSync = require('browser-sync').create()
|
||
|
|
pxtorem = require('postcss-pxtorem'),
|
||
|
|
postcssProcessors = [
|
||
|
|
postcssInlineSvg({
|
||
|
|
removeFill: true,
|
||
|
|
paths: ['./node_modules/bootstrap-icons/icons']
|
||
|
|
}),
|
||
|
|
pxtorem({
|
||
|
|
propList: ['font', 'font-size', 'line-height', 'letter-spacing', '*margin*', '*padding*'],
|
||
|
|
mediaQuery: true
|
||
|
|
})
|
||
|
|
];
|
||
|
|
|
||
|
|
const paths = {
|
||
|
|
scss: {
|
||
|
|
src: './scss/style.scss',
|
||
|
|
dest: './css',
|
||
|
|
watch: './scss/**/*.scss',
|
||
|
|
bootstrap: './node_modules/bootstrap/scss/bootstrap.scss',
|
||
|
|
},
|
||
|
|
js: {
|
||
|
|
bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js',
|
||
|
|
popper: './node_modules/@popperjs/core/dist/umd/popper.min.js',
|
||
|
|
barrio: '../../contrib/bootstrap_barrio/js/barrio.js',
|
||
|
|
dest: './js'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Compile sass into CSS & auto-inject into browsers
|
||
|
|
function styles () {
|
||
|
|
return gulp.src([paths.scss.bootstrap, paths.scss.src])
|
||
|
|
.pipe(sourcemaps.init())
|
||
|
|
.pipe(sass({
|
||
|
|
includePaths: [
|
||
|
|
'./node_modules/bootstrap/scss',
|
||
|
|
'../../contrib/bootstrap_barrio/scss'
|
||
|
|
]
|
||
|
|
}).on('error', sass.logError))
|
||
|
|
.pipe($.postcss(postcssProcessors))
|
||
|
|
.pipe(postcss([autoprefixer({
|
||
|
|
browsers: [
|
||
|
|
'Chrome >= 35',
|
||
|
|
'Firefox >= 38',
|
||
|
|
'Edge >= 12',
|
||
|
|
'Explorer >= 10',
|
||
|
|
'iOS >= 8',
|
||
|
|
'Safari >= 8',
|
||
|
|
'Android 2.3',
|
||
|
|
'Android >= 4',
|
||
|
|
'Opera >= 12']
|
||
|
|
})]))
|
||
|
|
.pipe(sourcemaps.write())
|
||
|
|
.pipe(gulp.dest(paths.scss.dest))
|
||
|
|
.pipe(cleanCss())
|
||
|
|
.pipe(rename({ suffix: '.min' }))
|
||
|
|
.pipe(gulp.dest(paths.scss.dest))
|
||
|
|
.pipe(browserSync.stream())
|
||
|
|
}
|
||
|
|
|
||
|
|
// Move the javascript files into our js folder
|
||
|
|
function js () {
|
||
|
|
return gulp.src([paths.js.bootstrap, paths.js.popper, paths.js.barrio])
|
||
|
|
.pipe(gulp.dest(paths.js.dest))
|
||
|
|
.pipe(browserSync.stream())
|
||
|
|
}
|
||
|
|
|
||
|
|
// Static Server + watching scss/html files
|
||
|
|
function serve () {
|
||
|
|
browserSync.init({
|
||
|
|
proxy: 'https://www.drupal.org',
|
||
|
|
})
|
||
|
|
|
||
|
|
gulp.watch([paths.scss.watch, paths.scss.bootstrap], styles).on('change', browserSync.reload)
|
||
|
|
}
|
||
|
|
|
||
|
|
const build = gulp.series(styles, gulp.parallel(js, serve))
|
||
|
|
|
||
|
|
exports.styles = styles
|
||
|
|
exports.js = js
|
||
|
|
exports.serve = serve
|
||
|
|
|
||
|
|
exports.default = build
|