Je travaille avec gulp sass pour compiler, préfixer et réduire mon scss en css et min.css, j'utilise watch pour lancer la compilation à chaque fois que je sauvegarde des fichiers mais soudainement gulp-sass a arrêté d'écrire les fichiers de sortie UNIQUEMENT lors de l'enregistrement de partiels, tout fonctionne bien quand j'enregistre le style principal.scss
C'est le journal SASS dans mon terminal dans les deux cas, que ce soit en sauvegardant le fichier principal ou des fichiers scss partiels. Comme vous pouvez le voir, il se déclenche les deux fois, mais uniquement sur les fichiers principaux, la sortie est générée et enregistrée.
var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
gulp.task('scripts', function() {
gulp.src('_js/*.js')
.pipe(concat('scripts.js'))
.pipe(gulp.dest('assets/js'));
return gulp.src(themeurl + 'assets/js/scripts.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest(themeurl+'assets/js/'));
});
gulp.task('watch', function () {
gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );
});
Gulp est installé globalement et le Gulpfile.js ci-dessous a toujours fonctionné jusqu'à hier. J'ai essayé plusieurs fois de changer le chemin gulp.src mais sans chance. Évidemment, je peux toujours compiler tout en sauvegardant le style.scss principal, mais c'est vraiment ennuyeux lorsque vous travaillez sur plusieurs fichiers simultanément.
Une autre chose étrange est que d'essayer de changer le chemin des fichiers pour compiler la version minifiée est revenu à un ancienne version de date; Je pensais que cela pourrait être un problème de cache NPM mais je ne suis pas vraiment confiant avec node / npm, je l'utilise juste pour compiler SCSS et concaténer JS et c'est tout.
Merci beaucoup d'avance à tous ceux qui pourrait m'aider.
[11:54:50] Starting 'sass'... [11:54:51] Finished 'sass' after 886 ms [11:54:52] Starting 'sass'... [11:54:53] Finished 'sass' after 809 ms
3 Réponses :
Est-ce que cela fonctionne lorsque vous remplacez le style par un * comme indiqué dans le bloc de code ci-dessous? * dit à gulp de rechercher tous les fichiers se terminant par .scss dans le dossier.
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
Merci Remco, j'ai déjà essayé mais malheureusement rien n'a changé. Comme je l'ai décrit dans la mise à jour, le problème semble être lié à la date / heure du fichier et non à la compilation: la compilation est mise à jour avec toutes mes modifications mais la date / heure ne l'est pas.
Avez-vous résolu votre problème? J'ai le même problème.
Ma solution de contournement est liée à la façon dont j'écris la tâche de surveillance. Et je dois supprimer le bundle css avant chaque nouvelle compilation
// old
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));
Le résultat est que le contenu du bundle CSS est mis à jour à chaque compilation mais la date / heure du bundle reste la même.
Salut @tibor, non, je n'ai vraiment pas. Si je veux que la date / heure de mon CSS compilé soit mise à jour, je dois enregistrer le fichier SCSS principal. Ma solution de contournement consiste donc à enregistrer le style.scss principal chaque fois que je dois publier quelque chose sur le site Web de préparation / production.
Quelque chose à propos de votre configuration a-t-il changé avant de cesser de fonctionner? Avez-vous mis à niveau les versions de l'un des packages? Êtes-vous sûr que les partiels sont importés dans le fichier principal?
MISE À JOUR: en fait, il semble que les fichiers sont mis à jour mais leurs métadonnées date / heure ne le sont pas. Ce n'est donc pas un problème lors du développement sur mon environnement local puisque je peux voir le frontend fonctionner correctement tout en écrivant SCSS, c'est ennuyeux car mon IDE ne détecte pas les fichiers à publier en raison de leurs dates obsolètes. @TheDancingCode le truc bizarre c'est que je n'ai rien changé. Vraiment bizarre. J'ai essayé de désinstaller le nœud et de l'installer à partir de zéro (avec tous les modules gulp nécessaires évidemment) mais le comportement est resté le même. Je suppose que je peux considérer mon problème résolu même si ce n'est pas le cas