Introduction et utilisation de la configuration pratique de gulp

Introduction :

gulp est un outil pour créer du code dans le processus de développement front-end, et est un outil pour créer des projets d'automatisation, il peut non seulement optimiser les ressources du site Web, mais aussi ; De nombreuses tâches répétitives en Python peuvent également être effectuées automatiquement en utilisant les bons outils ; grâce à lui, nous pouvons non seulement écrire du code avec plaisir, mais également améliorer considérablement notre efficacité de travail.

gulp est un exécuteur de tâches automatique basé sur Nodejs. Il peut effectuer automatiquement les tests, l'inspection, la fusion, la compression, le formatage et la navigation de javascript/coffee/sass/less/html/image/css et d'autres fichiers. Le serveur actualise automatiquement, génère des fichiers de déploiement et surveille les fichiers pour répéter les étapes spécifiées après les modifications. En termes de mise en œuvre, elle s'inspire de l'idée du tube du système d'exploitation Unix. La sortie du niveau précédent devient directement l'entrée du niveau suivant, ce qui rend l'opération très simple. À travers cet article, nous apprendrons comment utiliser Gulp pour modifier le processus de développement, rendant le développement plus rapide et plus efficace.

gulp est très similaire à grunt, mais comparé aux opérations d'E/S fréquentes de grunt, les opérations de flux de gulp peuvent terminer le travail de construction plus rapidement et plus facilement.

J'appelle cette configuration la configuration de test de démonstration, car lorsque je travaille, j'ai souvent besoin de produire rapidement des effets ou d'implémenter certaines fonctions. Si vous n'avez pas le temps de l'implémenter vous-même, alors vous devez en trouver. exemples ou plugins existants.

Cependant, ces démos ou plug-ins nécessitent souvent d'être visualisés sur le terminal mobile ou de démarrer un serveur, la tâche principale de cette configuration est donc de démarrer un serveur local, qui peut être visualisé à la fois sur le mobile terminal et le terminal PC en même temps. De plus, il est modifié. Il peut également être automatiquement actualisé lors du codage, il n'est donc pas nécessaire de changer d'application pour l'actualiser à chaque fois. Surtout du côté mobile, cela peut économiser beaucoup d'argent. inquiéter.

Le code détaillé est le suivant :

gulpfile.js :

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();// 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'},
    files: './demo/**/*',
    browser: ["chrome"]
  })
})// 默认任务，在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))

package.json :

{  "name": "gulp-demo",  "version": "1.0.0",  "description": "",  "main": "index.js?1.1.11",  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
  },  "author": "",  "license": "ISC",  "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"
  }
}

Structure des dossiers :

XX—

|— démo

|— gulpfile.js

|— package .json

Un seul plug-in est utilisé dans cette configuration browserSync Ce plug-in démarrera un serveur localhost, qui pourra s'actualiser automatiquement, et synchrone à la fois sur mobile et sur PC.

browserSync est un plug-in très puissant. Voici un document chinois à ce sujet, simple et facile à comprendre. Vous pouvez le vérifier vous-même si vous en avez besoin. De plus, une petite astuce ici est que nous pouvons surveiller les modifications de fichiers directement via les options de configuration du plug-in sans utiliser la fonction watch de gulp, qui est plus simple.

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!