11528 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Après avoir suivi un tutoriel, j'ai crée un kit de démarrage avec Gulp, qui me servira pour plusieurs projets.
Mon dernier besoin est le suivant: je veux créer un script 'npm prod' qui devra faire les taches suivantes:
1 - copier tous mes fichiers et dossiers php (conserver l'architecture des dossiers)
2 - supprimer le fichier 'style.css.map' (qui est généré automatiquement avec sass) pour ne pa l'envoyer en prod.
3 - Minifier le css

Ma config actuelle fonctionne mal (les fichiers sont copiés 1 seule fois puis le reload plombe).

Voici mon gulp:


const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const autoPrefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const changed = require('gulp-changed');
const imageMin = require('gulp-imagemin');
const util = require('gulp-util');
const path = require('path');

const config = {
  production: !!util.env.production
}

function style(){
 return gulp.src('./src/sass/**/*.scss')
  .pipe(sourceMaps.init({loadMaps: true}))
  .pipe(sass({
    outputStyle: 'expanded'
  }).on('error', sass.logError))
  .pipe(autoPrefixer('last 2 versions'))
  .pipe(concat('style.css'))
  .pipe(config.production ? cleanCSS() : util.noop())
  .pipe(config.production ? util.noop() : sourceMaps.write('.'))
  .pipe(gulp.dest('./dist/css'))
  .pipe(browserSync.stream())
}

function javaScript(){
  return gulp.src('./src/js/**/*.js')
    .pipe(concat('index.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'))
}

function imageMinFunction(){ 
  return gulp.src('./src/images/*')
    .pipe(changed('./dist/images/'))
    .pipe(imageMin([
      imageMin.gifsicle({interlaced: true}),
      imageMin.mozjpeg({quality: 75, progressive: true}),
      imageMin.optipng({optimizationLevel: 5}),
      imageMin.svgo({
        plugins: [
            {removeViewBox: true},
            {cleanupIDs: false}
          ]
        })
      ])
    )
    .pipe(gulp.dest('./dist/images'))
}

function copyFiles(){
  var sourceFiles = [
    path.join(__dirname,  './*.php'),
    path.join(__dirname, './inc/**/*.php')
  ]

  return gulp
          .src(sourceFiles, {base: '.'})
          .pipe(gulp.dest(path.join(__dirname, './dist/')))
    
}

function watch(){
  browserSync.init({
    open: 'external',
    proxy: 'http://localhost/gulpy',
    port: 8080

  });
  gulp.watch('./src/sass/**/*.scss', style);
  gulp.watch('./src/images/*', imageMinFunction);
  gulp.watch('./**/*.php', copyFiles).on('change', browserSync.reload);
  gulp.watch('./src/js/**/*.js', javaScript).on('change', browserSync.reload);

}

var build = gulp.parallel(watch);
gulp.task('default', build);


Merci pour votre aide parce que je galère avec Gulp.
Modifié par allan00958 (05 Sep 2020 - 21:24)