L'explication la plus détaillée de l'installation de gulp + packaging + fusion

Cette fois, je vais vous apporter l'explication la plus détaillée de l'installation + packaging + fusion de gulp Quelles sont les précautions pour l'utilisation de l'installation + packaging + fusion Ici. sont les cas réels, jetons un coup d'œil.

Avant-propos

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 automatisés ; non seulement il peut optimiser les ressources du site Web, mais de nombreuses tâches répétitives pendant le processus de développement peuvent être effectuées automatiquement en utilisant les bons outils;En l'utilisant, nous pouvons non seulement écrire du code avec bonheur, mais également améliorer considérablement notre efficacité au 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 : accélérer la prochaine étape.

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 en ligne de commande :

f:
cd gulp

5. Installer gulp local

cnpm install --save-dev gulp

6. Créez le fichier package.json

cnpm init

Entrez simplement jusqu'au bout

7.webÉditeurOuvrez ce répertoire gulp, tel que hbuilder, webstorm.

Créez le fichier gulpfile.js

dans le répertoire gulp 8. Déterminez quel type d'emballage et de compression, html, js, css, img

Emballage 9.js

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écutez ; entrée node.js

avaler

Il y aura un message d'erreur indiquant que le composant gulp-concat n'est pas installé. Démarrer l'installation : cnpm install gulp-concat --save-dev

Courez à nouveau : avalez

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

Courez à nouveau : avalez

Ici, vous verrez terminé « par défaut », « par défaut » 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'))
   .ipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'))
  });

Rediffusion : avaler

Résultat :

Vous constaterez que seule la tâche par défaut est exécutée. Parce que c'est la seule entrée d'exécution de gulp par défaut.

Modifié 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 devez savoir comment l'utiliser.

11. Compression d'images

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

Compression 12.html

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

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

Solution à la commande lorsque gulp emballe js/css et les fusionne en un seul fichier

1. Vous pouvez utiliser gulp-order pour insérer.

2. Vous pouvez l'écrire 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目录

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

Lecture recommandée :

Comment implémenter le chargement automatique des images avec js et jquery (avec code)

Comment utiliser les autorisations utilisateur de Vue2.0

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!