Gulp 4 - Gulpfile.js configurer

Bien, nous pourrions avoir besoin de plus d'informations sur les erreurs que vous obtenez. Mais, ce devrait fonctionner si le problème est juste l'obtention de votre gulpfile.js de travail.

Si vous avez déjà trouvé la solution, puis une grande. Mais pour les autres qui viennent à travers cela, je vais donner quelques conseils, et alors cela devrait fonctionner.

Indice

• Première: la Désinstallation de gulp 3 et l'installation de gulp 4
  • Je vais fournir d'installer et de désinstaller les directions afin d'utiliser gulp 4.
• Deuxième: un Test pour voir si gulp 4 œuvres
  • Je vais vous donner le plus de la version de base de l'essayer, et si cela fonctionne, alors,
• Troisième: La dernière version gulpfile
  • essayer la deuxième version-je fournir pour les besoins que vous avez mentionné basé sur le fichier que vous venez de me montrer.
• Enfin: Quelques notes sur Gulp 4 et actuel gulp 4 construire
  1. Basé sur votre gulpfile montré, voici quelques conseils sur la Gulp 4,
  2. Et la correction rapide de l'actuel gulp 4 version 0.4.0

---

Première: la Désinstallation de gulp 3 et l'installation de gulp 4

Si vous ne l'avez pas déjà supprimé l'original gorgée de votre système, vous devez le faire. Aussi, vous devez l'enlever aussi un projet de dépendance si vous l'avez ajouté.

npm uninstall -g gulp
cd {your-project-dir}
npm uninstall gulp

Ensuite, vous devez installer gulp 4 à l'échelle mondiale et dans votre projet comme une dépendance.

npm install -g gulpjs/gulp-cli#4.0

dans votre projet:

npm install --save-dev gulpjs/gulp-cli#4.0

NOTES IMPORTANTES

Il est maintenant gulpjs/gulp#4.0 (gulp au lieu de gulp-cli)

---

Deuxième: un Test pour voir si gulp 4 œuvres

Version de base de votre gulpfile:

REMARQUE: Modifier le trait.src(...), et .pipe(gulp.dest (...) les chemins d'accès si vous êtes un copier-coller.

//=========================================================
//gulpfile.js
//=========================================================
var gulp        = require('gulp'),
    sass        = require('gulp-sass');

//---------------------------------------------- Gulp Tasks
gulp.task('sass', function(){
    return gulp.src("path/to/sass-file.scss")
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("path/to/css-destination.css"))
});

//--------------------------------------- Default Gulp Task
gulp.task('default', function(){
    console.log("It's working!");
});

Voyons si gulp 4 est de travail:

1. exécuter le défaut gulp tâche dans votre terminal:

   gulp

   • Si vous voyez: It's working! dans votre terminal, alors vous savez que gulp 4 est installé correctement.
   • Si vous voyez "Ça fonctionne!", mais aussi quelques erreurs, alors vous aurez besoin pour résoudre ceux-ci, mais la question devrait être avec votre gulpfile.js fichier. (Voir également la plus récente d'installer/désinstaller des instructions && plus récente gulp 4 tutoriels si peu de temps a passé depuis ce qui a été posté).
   • Si vous voyez des erreurs (et "Ça fonctionne!" n'est pas du tout), alors il est probable que gulp 4 n'a pas été correctement installé, ou gulp 3 n'a pas été correctement supprimé et que vous devez la désinstaller les deux gulp 3 et 4 et réinstaller gulp 4. REMARQUE: Cela est particulièrement probable si vous avez essayé un tas de différentes instructions d'installation à partir de diverses sources.

2. Si cela a fonctionné, alors:

   • nous allons sauvegarder vos fichiers css, sass a créé pour vous auparavant (si projet existant), puis en supprimant ces fichiers css, puis
   • prochaine essayez de lancer votre sass tâche dans le terminal:

   gulp sass

Si cela a fonctionné (créé ces fichiers), puis le tout est de travailler et de continuer à mes autres extraits ci-dessous.

---

Troisième: La finale gulpfile version

Voici la solution pour vos besoins en fonction de la gulpfile.js illustré:

//=========================================================
//gulpfile.js
//=========================================================
//------------------------------------------------ requires
var gulp = require('gulp'),
    sass = require('gulp-sass');

//------------------------------------------------- configs
var paths = {
  sass: {
    src: './furniture/sass/**/*.{scss,sass}',
    dest: './furniture/css',
    opts: {

    }
  }
};

//---------------------------------------------- Gulp Tasks
gulp.task('sass', function () {
  return gulp.src(paths.sass.src)
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.sass.dest))
});

//------------------------------------ Gulp Testing Message
gulp.task('message', function(){
  console.log('It works!!');
});

//---------------------------------------------- Gulp Watch
gulp.task('watch:styles', function () {
  gulp.watch(paths.sass.src, gulp.series('sass'));
});

gulp.task('watch', gulp.series('sass',
  gulp.parallel('watch:styles')
));


//-------------------------------------------- Default task
gulp.task('default', gulp.series('sass', 
  gulp.parallel('message', 'watch')
));

Bien que j'ai dit, c'est la version finale, j'ai laissé l'option message tâche dans le gulpfile, afin de montrer gulp.series et gulp.parallel au travail. J'ai brièvement les couvrir dans la dernière section ci-dessous.
Il n'est pas nécessaire et peut être supprimé.

Vous pouvez également remarquer que j'ai ajouté une montre tâche qui contient:

gulp.series('sass', gulp.parallel('watch:styles'))
Ceci est fait de sorte que vous pouvez à l'avenir, d'en ajouter d'autres watch: tâches. par exemple,watch:scripts.

La gulp.series('sass'...) partie est purement une méthode de convenance. Si vous écrivez du code, puis exécutez votre gulp tâche, vous aurez besoin de modifier de nouveau avant vos modifications sont prises en compte. L'ajout de la 'sass' d'abord avant de lancer la montre tâches, il transpile avant qu'il commence à regarder pour les changements.

---

Enfin: Quelques notes sur Gulp 4 et actuel gulp 4 construire

1. Basé sur votre gulpfile montré, voici quelques conseils sur la Gulp 4

Gulp 4 utilise maintenant:

• gulp.series: Contrôles de l'ordre de ce qui doit être exécuté. Il exécute les tâches dans l'ordre jusqu'à la fin, par exemple:
  
  gulp.series('task-name-1', 'task-name-2')
• "gulp.parallèles": Exécute les tâches en même temps que gulp 3 auparavant avait fait, par exemple:
  
  gulp.parallel('task-name-3', 'task-name-4')

• seires et parallel peuvent être utilisés ensemble pour mieux contrôler le flux des tâches, par exemple:

  gulp.task('example', 
    gulp.series('thisTaskIsRunFirst', 'thisSecond',
      gulp.parallel('theseThird-SameTime-1', 'theseThird-SameTime-2')
  ));  

2. Et la correction rapide de l'actuel gulp 4 construire

Dans ces exemples, vous remarquerez que j'ai utilisé gulp.series dans le watch:styles tâche:

    //---------------------------------------------- Gulp Watch
    gulp.task('watch:styles', function () {
      gulp.watch(paths.sass, gulp.series('sass'));
    });

Cela est dû, sans doute, un bug dans le gulp 4 montre la méthode. Je suis en supposant que c'est le cas, comme je ne pouvais pas le regarder tâche en utilisant simplement 'sass' et lieu d'utiliser gulp.series('sass').

Je l'ai dit, on peut supposer que c'est un bug, comme lors de l'apprentissage de gulp 4 moi-même, d'autres ont été à l'aide de la montre traditionnelle tâche format avec leurs gulp 4 exemples:

gulp.task('watch', function(){
  gulp.watch('path/of/files/to/watch/**/*.scss', 'sass');
});

J'ai eu à venir avec ce travail autour afin d'utiliser gulp regarder. Ce qui est bien, et pourrait également fournir d'autres prestations de l'exécution de certains autres tâches après si vous le souhaitez.

Je vais revenir et de fournir un tutoriel liens pour Gulp 4 une fois que j'ai fini d'écrire.

OriginalL'auteur Tristan Isfeld