Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'installation, de l'emballage et de la fusion de gulp

小云云
Libérer: 2018-01-18 10:48:35
original
2815 Les gens l'ont consulté

Cet article vous présente principalement le tutoriel sur la façon d'implémenter une méthode d'empaquetage et de fusion dans gulp, et partage la solution à l'ordre dans lequel gulp emballe js/css et les fusionne en un seul fichier. l'exemple de code dont vous avez besoin. Les amis peuvent s'y référer et suivre l'éditeur pour apprendre ensemble. J'espère que cela aide tout le monde.

Avant-propos

gulp est un outil pour créer du code dans le processus de développement front-end. C'est un outil pour créer des projets d'automatisation, il peut non seulement optimiser les ressources du site Web, mais également éliminer de nombreux projets répétitifs. les tâches pendant le processus de développement. Les tâches peuvent être complétées automatiquement en utilisant les bons outils ; en utilisant cela, nous pouvons non seulement écrire du code avec plaisir, mais également améliorer considérablement notre efficacité de travail.

Installation, packaging et fusion

1. Installez node.js Adresse de téléchargement : http://nodejs.cn/

Ouvrez la ligne de commande node.js et saisissez : node - v , s'il existe un numéro de version, il est correctement installé.

2. Installer l'image Taobao : Saisie de la ligne de commande :

npm install -g cnpm --registry=http://registry.npm.taobao.org
Copier après la connexion

Objectif : Rendre le téléchargement plus rapide.

3. Installez gulp globalement

cnpm install --global gulp
Copier après la connexion

4. Créez un répertoire, ouvrez le lecteur F et créez un dossier gulp.

Saisie de la ligne de commande :

f:

cd gulp
Copier après la connexion

5. Installez gulp local

cnpm install --save-dev gulp
Copier après la connexion

6. Créez le fichier package.json

cnpm init
Copier après la connexion

tout. le chemin Entrez simplement pour confirmer

7. Ouvrez ce répertoire gulp dans un éditeur Web, tel que hbuilder et webstorm.

Créez le fichier gulpfile.js dans le répertoire gulp, le point d'entrée pour l'exécution de gulp


8. Déterminez le type d'empaquetage et de compression. , html, js, css, img

9.js packaging

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});
Copier après la connexion

10 Exécuter l'entrée node.js

gulp

rapportera ; une erreur, invitant gulp- Le composant concat n'est pas installé. Démarrez l'installation : cnpm install gulp-concat --save-dev

Exécutez à nouveau : gulp

Une erreur est à nouveau signalée, indiquant que le composant gulp-uglify n'est pas installé. Démarrez l'installation : cnpm install gulp-uglify --save-dev

Exécutez à nouveau : gulp

. . . . . . . . . . . . . . .

Après le succès, vous verrez

ici vous verrez terminé 'default', 'default' est l'entrée par défaut pour démarrer la tâche gulp.task . Si vous créez plusieurs tâches et modifiez le nom de la tâche tel que :

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
  gulp.task('style', function() { //task 任务名称为style
 
  gulp.src('.css/*.css')
 
  .pipe(concat('styles.css'))
 
  .pipe(autoprefix('last 2 versions'))
 
  .pipe(minifyCSS())
 
  .pipe(gulp.dest('styles'));
 
  });
Copier après la connexion

réexécutez : gulp

Résultat :

OK Il a été constaté que seule la tâche par défaut a été exécutée. Parce que c'est la seule entrée d'exécution de gulp par défaut.

Modifiez comme suit

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题:gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
  gulp.task('style', function() { //task 任务名称为style
 
  gulp.src('.css/*.css')
 
  .pipe(concat('styles.css'))
 
  .pipe(autoprefix('last 2 versions'))
 
  .pipe(minifyCSS())
 
  .pipe(gulp.dest('styles'));
 
  });

<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});
Copier après la connexion

Si vous rencontrez un composant qui n'est pas installé, je pense que vous devriez savoir comment le faire fonctionner.

11. Compression d'image

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});
Copier après la connexion

12.compression html

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});
Copier après la connexion

13. Modifiez le problème de chemin par vous-même

Lorsque gulp package js. /css Résoudre la commande lors de la fusion en un seul fichier

1 Vous pouvez utiliser insert gulp-order.

2. Cela peut être écrit comme ceci :

return gulp.src(['js/common.js','js/**/*.js'])
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录
Copier après la connexion

Recommandations associées :

Implémentation par Gulp du partage d'exemples de modularisation de pages Web statiques

Explication détaillée de nodejs pour implémenter un packaging gulp simple

Comment utiliser gulp pour réaliser la compression de fichiers et le chargement à chaud du navigateur

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!