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:
Merci pour votre aide parce que je galère avec Gulp.
Modifié par allan00958 (05 Sep 2020 - 21:24)
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)