Ce que vous devez savoir pour démarrer avec gulp

Cette fois, je vais vous apporter ce que vous devez savoir pour démarrer avec gulp et ce que vous devez savoir lors de l'utilisation de gulp Quelles sont les précautions Voici des cas pratiques, jetons un coup d'œil.

1. Installer gulp globalement
1. Description : Le but de l'installation de gulp globalement est d'effectuer des tâches gulp via elle
2 Installation : Exécuter à partir de l'invite de commande

npm ; install gulp -g

3. Vérifiez s'il est correctement installé : Exécutez

gulp -v

à l'invite de commande si le numéro de version. apparaît, cela signifie qu'il est correctement installé.
2. Installez gulp dans le projet

npm install --save-dev gulp

- Remarque : l'installation de gulp globalement consiste à effectuer des tâches de gulp, et l'installation de gulp localement est appeler la fonction du plug-in gulp.
3. Installez un certain module de gulp (prenez gulp-less comme exemple, compilez le fichier less)

npm install gulp-less --save-dev

4. Créez un nouveau fichier package.json

npm init

Remplissez les informations du projet en fonction des invites.
5. Créez un nouveau fichier gulpfile.js dans le répertoire racine du projet. gulpfile.js est le fichier de configuration du projet gulp. Il s'agit d'un fichier js ordinaire situé dans le répertoire racine du projet (dans. en fait, placez gulpfile.js dans un autre dossier), l'exemple de fichier est le suivant :

//导入工具包 require('node_modules里对应模块')var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//定义一个testLess任务（自定义任务名称）gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css});

gulp.task('default',['testLess', 'elseTask']); tâche par défaut elseTask comme les autres tâches. L'exemple ne définit pas la tâche elseTask //gulp.task(name[, deps], fn) définit le nom de la tâche : nom de la tâche deps : nom de la tâche dépendante fn : Fonction de rappel//gulp.src(globs[, options ]) Fichiers traités par les tâches d'exécution globs : Chemin du fichier traité (chaîne ou tableau de chaînes) //gulp.dest(path[, options]) Après traitement, le chemin généré du fichier

6. Cnpm facultatif
1. Remarque : étant donné que le plug-in d'installation npm est téléchargé à partir d'un serveur étranger, il est grandement affecté par le réseau et peut provoquer des anomalies. Le serveur npm était en Chine, donc l'équipe Taobao que nous sommes heureux de partager l'a fait. Extrait du site officiel : "Il s'agit d'un miroir npmjs.org complet. Vous pouvez l'utiliser à la place de la version officielle (lecture seule). La fréquence de synchronisation est actuellement d'une fois toutes les 10 minutes pour garantir qu'elle est aussi synchronisée avec le service officiel possible.";
2. Site officiel : http://npm.taobao.org;
3. Installation : Invite de commande pour exécuter npm install cnpm -g --registry=https:// registry.npm.taobao.org
; Remarque : après l'installation, il est préférable de vérifier le numéro de version cnpm -v ou de fermer l'invite de commande et de la rouvrir. Si vous l'utilisez directement après l'installation, des erreurs peuvent survenir. ;
Remarque : l'utilisation de cnpm est exactement la même que celle de npm, uniquement lors de l'exécution de la commande Change npm to cnpm

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment implémenter la connexion d'un nœud à MySQL

Expressions régulières JSComment utiliser

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!