méthodes du module gulp

1. src()
La méthode src du module gulp est utilisée pour générer des flux de données. Ses paramètres représentent les fichiers à traiter, et ces fichiers spécifiés seront convertis en flux de données.

js/app.js 指定确切的文件名
js/*.js 某个目录所有后缀名为js的文件
js/**/*.js 某个目录及其所有子目录中所有后缀名为js的文件
！js/app.js 除了js/app.js以外所有文件
*.+(js css)匹配项目根目录下，所有后缀名为js或css的文件

Le paramètre de la méthode src peut également être un tableau pour spécifier plusieurs membres

gulp.src(['js/**/*.js','!js/**/*.min.js'])

2 dest()
la méthode dest sera La la sortie du pipeline est écrite dans le fichier, et ces sorties continuent d'être sorties en même temps, de sorte que la méthode dest peut être appelée plusieurs fois de suite pour écrire la sortie dans plusieurs répertoires. Si un répertoire n’existe pas, il sera reconstruit. La méthode

gulp.src('./client/templates/*.jade')
      .pipe(jade())
      .pipe(gulp.dest('./build/template'))
      .pipe(minify())
      .pipe(gulp.dest('./build/minified_templates'));

dest peut également accepter un deuxième paramètre, indiquant que l'objet de configuration

gulp.dest('build',{
 cwd:'./app',
 mode:'0644'})

possède deux champs. Le champ cwd spécifie le répertoire de base pour écrire le chemin, la valeur par défaut est le répertoire actuel ; le champ mode spécifie l'autorisation d'écrire le fichier, la valeur par défaut est 0777.
3.task()
la méthode des tâches est utilisée pour définir des tâches spécifiques. Son premier paramètre est le nom de la tâche et le deuxième paramètre est la fonction de la tâche.

gulp.task('greet',function(){
  console.log('Hello world');
});

La méthode de tâche peut également spécifier un ensemble de tâches à exécuter en séquence

gulp.task('build',['css','js','imgs']);

Spécifiez la construction de la tâche, qui se compose de trois tâches : css, js et imgs . La méthode task exécutera ces trois tâches simultanément. Notez que chaque tâche est appelée de manière asynchrone, il n'y a donc aucun moyen de garantir l'heure à laquelle la tâche js commence à s'exécuter.

Si vous souhaitez que chaque tâche s'exécute strictement dans l'ordre, vous pouvez écrire une tâche en tant que module dépendant de la tâche suivante.

gulp.task('css',['greet'],function(){
  //deal with css here});

La tâche CSS dépend de la tâche d'accueil, donc CSS s'exécutera certainement une fois l'accueil terminé.

La fonction de rappel de la méthode task peut également accepter une fonction en paramètre, ce qui est très utile pour exécuter des tâches asynchrones

//执行shell命令var exec=require('child_process').exec;
gulp.task('jekyll',function(cb){//build jekyllexec('jekyll build',function(err){
 if(err) return cb(err);//return error
 cb();//finished task})
})

Si le nom d'une tâche est par défaut, c'est celui-ci. indique qu'il s'agit de la tâche par défaut, entrez la commande gulp directement sur la ligne de commande et la tâche sera exécutée.

gulp.task('default',function(){
  //default task})//或者gulp.task('default',['styles','jshint','watch']);

Lors de l'exécution, l'utilisation directe de gulp exécutera trois tâches : styles, jshint et watch.

4 watch()
La méthode watch est utilisée pour spécifier les fichiers qui doivent être surveillés. Une fois ces fichiers modifiés, la tâche spécifiée est exécutée.

gulp.task('watch',function(){
  gulp.watch('templates/*.tmpl.html',['build']);
});

Le code spécifie qu'une fois le fichier modèle dans le répertoire des modèles modifié, la tâche de construction sera exécutée.

La méthode watch peut également utiliser une fonction de rappel pour remplacer la tâche spécifiée

gulp.watch('templates/*.tmpl.html',function(event){
 console.log('Event type: '+event.type);
 console.log('Event path: '+event.path);
});

Une autre façon de l'écrire est lorsque les fichiers surveillés par la méthode watch changent (modifier, ajouter, supprimer fichiers), L'événement de changement sera déclenché. Vous pouvez spécifier une fonction de rappel pour l'événement de changement

var watcher=gulp.watch('templates/*.tmpl.html',['build']);
watcher.on('change',function (event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path);
});

En plus de l'événement de changement, la méthode watch peut également déclencher les événements suivants
end Déclenché lorsque la fonction de rappel se termine
error Déclenché lorsqu'une erreur se produit
ready Déclenché lorsque le fichier d'écoute démarre
nomatch Déclenché lorsqu'il n'y a pas de fichier d'écoute correspondant

L'objet watcher contient également d'autres méthodes
watcher.end() arrête l'objet watcher et n'appellera plus de tâches ou de fonctions de rappel
watcher. files() renvoie les fichiers surveillés par l'objet watcher
watcher.add( glob) pour ajouter le fichier à surveiller, il peut également attacher un deuxième paramètre, indiquant que la fonction de rappel
watcher.remove(filepath) supprime un fichier surveillé à partir de l'objet watcher

5. module gulp-livereload
Le module gulp-livereload est utilisé pour actualiser automatiquement le navigateur pour refléter les dernières modifications apportées au code source. En plus des modules, cela nécessite également l'installation de plug-ins dans le navigateur pour faire face aux modifications du code source.

var gulp=require('gulp'),
     less=require('gulp-less'),
     livereload=require('gulp-livereload'),
     watch=require('gulp-watch');
gulp.task('less',function(){
   gulp.src('less/*.less')
        .pipe(watch("less/*.less") )
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(livereload());
})

Le code est utilisé pour surveiller le fichier less. Une fois la compilation terminée, le navigateur sera automatiquement actualisé.

6 modules gulp-load-plugins

Généralement, les modules de gulpfile.js doivent être chargés un par un

var gulp=require('gulp'),
    jshint=require('gulp-jshint'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');
 gulp.task('js',function(){  return gulp.src('js/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('default'))
           .pipe(uglify())
           .pipe(concat('app.js'))
           .pipe(gulp.dest('build'));
})

dans le code En plus du module gulp, trois autres modules

sont également chargés. Cette méthode de chargement est plus gênante. Utilisez le module gulp-load-plugins pour charger tous les modules gulp dans le fichier package.json.

var gulp=require('gulp'),
 gulpLoadPlugins=require('gulp-load-plugins'),
 plugins=gulpLoadPlugins();
 gulp.task('js',function(){ return gulp.src('js/*.js')
  .pipe(plugins.jshint())
  .pipe(plugins.jshint.reporter('default'))
  .pipe(plugins.uglify())
  .pipe(plugins.concat('app.js'))
  .pipe(gulp.dest('build'));
})

Cet article explique la méthode du module gulp Pour plus de contenu connexe, veuillez faire attention au site Web php chinois.

Recommandations associées :

js génère du HTML sous forme d'images et les enregistre localement

Trois façons de définir des fonctions en js

''Vrai et Faux'' en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!