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

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

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

3. Installez gulp globalement

cnpm install --global gulp

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

5. Installez gulp local

cnpm install --save-dev gulp

6. Créez le fichier package.json

cnpm init

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目录下。
});

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'));
 
　　});

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任务
});

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'));
});

12.compression html

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

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目录

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!