Essayer de régler l'avale et l'une des étapes est frustrant. Je suis un tutoriel et je n'arrive pas à le faire fonctionner correctement.Vous ne pouvez pas obtenir GulpFile pour agir comme je le veux, manquant quelque chose?
https://css-tricks.com/gulp-for-beginners/
Fondamentalement, je veux créer une tâche de construction qui compile SASS, concats les fichiers CSS, réduit au minimum, et la sortie dans le dossier public. Voici mon code pour mon index.html. (Simplifié).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--build:css css/styles.min.css -->
<link rel="stylesheet" href="scss/styles.scss">
<!-- endbuild -->
</head>
<body>
</body>
</html>
Voici mon Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass'),
useref = require('gulp-useref'), // Use to concatenate files
gulpIf = require('gulp-if'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
imagecache = require('gulp-cache'),
del = require('del'),
runsequence = require('run-sequence');
/* ********************************* */
// PRODUCTION TASKS ONLY \\
/*Used to start with a clean slate on the public folder */
gulp.task('clean:public', function() {
return del.sync('public');
})
gulp.task('watch:prod', function() {
gulp.watch('src/scss/**/*.scss', ['sass']);
});
gulp.task('sass:prod', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('public/css'))
});
gulp.task('useref:prod', function() {
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('public'));
});
gulp.task('images:prod', function() {
return gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
.pipe(imagecache(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
.pipe(gulp.dest('public/images'));
});
gulp.task('cssimages:prod', function() {
return gulp.src('src/css/cssimages/**/*.+(png|jpg|gif|svg)')
.pipe(imagecache(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({plugins: [{removeViewBox: true}]})
])))
.pipe(gulp.dest('public/css/cssimages'));
});
/* BRING EVERYTHING TOGETHER */
gulp.task('build:prod', function (callback){
runsequence
(
'clean:public',
['sass:prod','useref:prod','images:prod', 'cssimages:prod'],
callback
)
})
Selon le tutoriel, cela devrait créer un fichier dans le dossier public sous .es css
Ce fichier doit aussi déjà être compilé à partir de sass. J'ai fait un exemple de styles.scss et à l'intérieur j'ai.
$bgcolor : yellow;
body {
background: $bgcolor;
}
div {
width: 100px;
height: 20px;
}
Quand je lance la construction gulp: prod, c'est ce qu'il génère dans styles.min.css
$bgcolor:#ff0;body{background:$bgcolor}div{width:100px;height:20px}
Les fichiers réduisant au minimum bien, mais je ne peux pas la partie SASS droite et compiler l'exécution quand utiliser la tâche de construction.
^^^ Comme vous le voyez, au lieu de sassing le fichier et concaténer le fichier, il crée 2 fichiers. J'essaie d'avoir gulp sass le fichier d'abord, puis nous avons useref déplacer le fichier dans le dossier public et le renommer en styles.min.css
Il semble que je manque quelque chose quelque part ou ne pas sourcer/destinating les bons dossiers?
Si je lance gulp sass: prod, cela fonctionne très bien. Mais je n'arrive pas à faire fonctionner ma tâche de construction, je suis perplexe.
Ceci est la meilleure réponse - donner @Ramu le crédit, mais vous avez certainement besoin de modifier votre appel runsequence comme je l'ai mentionné - il peut fonctionner sans que changer une partie ou la plupart du temps, mais il échouera au hasard si vous laissez-le tel quel. – Mark
Omg merci à vous deux pour l'aide qui a fonctionné! Merci Mark pour le changement de séquence de course et merci @ Ramu-Achala pour l'explication complète! Je déchirais les yeux en essayant de comprendre pourquoi cela ne fonctionnait pas. – grimesd