const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const url = "http://bsbase.local/";
module.exports = {
mode: 'development',
// mode: 'production',
entry: './assets/src/js/main.js',
output: {
path: path.resolve(__dirname, 'assets/js'),
filename: 'webpack.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
miniCss.loader,
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
],
},
plugins: [
new miniCss({
filename: '../css/my.css',
}),
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: url,
open: false,
notify: true,
reloadDelay: 500,
injectChanges: true,
files: [
{
match: [
'**/*.php',
'**/*.js',
'**/*.css',
],
fn: function (event, file) {
if (event === "change") {
const bs = require('browser-sync').get('bs-webpack-plugin');
bs.reload();
}
}
}
]
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
};
'use strict';
let gulp = require('gulp'),
//css
// stylus = require('gulp-stylus'),
sass = require('gulp-sass'),
autoprefixer = require("gulp-autoprefixer"),
sourcemaps = require('gulp-sourcemaps'),
wait = require('gulp-wait'),
notify = require("gulp-notify"),
plumber = require("gulp-plumber"),
browserSync = require('browser-sync').create(),
replace = require('gulp-replace');
let siteUrl = 'http://wc-estore.host1670806.hostland.pro/';
let siteDir = '../wc-estore/';
gulp.task("scss", function () {
return gulp.src(siteDir + 'assets/scss/my.scss')
// .pipe(plumber())
.pipe(sourcemaps.init())
.pipe(wait(500))
.pipe(sass({
outputStyle: 'expanded'
}).on('error', notify.onError(function (error) {
return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
})))
.pipe(autoprefixer({
cascade: false
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(siteDir + 'assets/css/'))
.pipe(browserSync.reload({stream: true}))
.pipe(notify("Change css"));
});
gulp.task("watch", function () {
gulp.watch(siteDir + 'assets/scss/**/*.scss', gulp.series('scss'));
});
gulp.task('browser-sync', function () {
browserSync.init({
proxy: {
target: siteUrl,
ws: true
},
reloadDelay: 2000
});
gulp.watch(siteDir + "**/*.php").on('change', browserSync.reload);
gulp.watch(siteDir + "**/*.css").on('change', browserSync.reload);
gulp.watch(siteDir + "**/*.js").on('change', browserSync.reload);
});
gulp.task('default', gulp.parallel('watch', 'browser-sync'));
var fontfacegen = require('fontfacegen');
var map = require('map-stream');
gulp.task('fontgen', function() {
return gulp.src("./assets/*.{ttf,otf}")
.pipe(map(function(file, cb) {
fontfacegen({
source: file.path,
dest: './dest/'
});
cb(null, file);
}));
});