mise à jours de gulp

web/themes/custom/popsu/gulpfile.js

@@ -1,51 +1,39 @@
+const {
+    src,
+    dest,
+    parallel,
+    series,
+    watch
+} = require('gulp');
 
-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 uglify = require('gulp-uglify');
+const rename = require('gulp-rename');
+const sass = require('gulp-sass')(require('sass'));
+const autoprefixer = require('gulp-autoprefixer');
+const cssnano = require('gulp-cssnano');
+const concat = require('gulp-concat');
+const clean = require('gulp-clean');
+//const imagemin = require('gulp-imagemin');
+const changed = require('gulp-changed');
+const browsersync = require('browser-sync').create();
 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'));
-});
+function clear() {
+    return src('./assets/*', {
+            read: false
+        })
+        .pipe(clean());
+}
 
+// JS function 
 
-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')
+function js() {
+    const source = './lib/*.js';
+    return src(source)
     .pipe(webpackStream({
         mode: "production",
         plugins: [
@@ -70,16 +58,36 @@ gulp.task('packing', function () {
                 
     }
     ))
-    .pipe(gulp.dest('js/'));
-});
+    .pipe(dest('./assets/js/'));
+}
 
+// CSS function 
 
-gulp.task('watch', function(){
-    livereload.listen();
+function css() {
+    const source = './sass/**/*.scss';
 
-    gulp.watch('./sass/**/**/*.scss', ['sass']);
-    gulp.watch('./lib/*.js', ['packing']);
-    gulp.watch(['./css/style.css', './**/*.twig', './js/*.js'], function (files){
-        livereload.changed(files)
-    });
-});
+    return src(source)
+        .pipe(changed(source))
+        .pipe(sass({
+            outputStyle: 'compressed',
+            includePaths: ['./node_modules/foundation-sites/scss']}
+        ))
+        .pipe(autoprefixer({
+            overrideBrowserslist: ['last 2 versions', 'ie >= 9', 'android >= 4.4', 'ios >= 7'],
+            cascade: false
+        }))
+        .pipe(rename({
+            extname: '.min.css'
+        }))
+        .pipe(cssnano())
+        .pipe(dest('./assets/css/'))
+        .pipe(browsersync.stream());
+}
+function watchFiles() {
+    watch('./sass/**/**/*.scss', css);
+    watch('./lib/*.js', js);
+}
+
+exports.default = series(clear, parallel(js, css));
+
+exports.watch = parallel(watchFiles);