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
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!