var gulp = require('gulp'); var livereload = require('gulp-livereload') var uglify = require('gulp-uglifyjs'); var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); var sourcemaps = require('gulp-sourcemaps'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); const webpack = require('webpack'); const webpackStream = require('webpack-stream'); const compiler = require('webpack') gulp.task('imagemin', function () { return gulp.src('./images/*') .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngquant()] })) .pipe(gulp.dest('./images')); }); gulp.task('sass', function () { gulp.src('./sass/**/*.scss') .pipe(sourcemaps.init()) .pipe(sass({ //outputStyle: 'compressed', includePaths: ['node_modules/foundation-sites/scss'] }).on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./css')); }); /*gulp.task('uglify', function() { gulp.src('./lib/*.js') .pipe(uglify('main.js')) .pipe(gulp.dest('./js')) });*/ gulp.task('packing', function () { return gulp .src('./lib/*.js') .pipe(webpackStream({ mode: "production", plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), ], output: { filename: "main.js", }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ], }, }, compiler, function(err, stats) { } )) .pipe(gulp.dest('js/')); }); gulp.task('watch', function(){ livereload.listen(); gulp.watch('./sass/**/*.scss', ['sass']); gulp.watch('./lib/*.js', ['packing']); gulp.watch(['./css/style.css', './**/*.twig', './js/*.js'], function (files){ livereload.changed(files) }); });