Maison > interface Web > Tutoriel H5 > le corps du texte

Exemples de compression utilisant gulp

PHP中文网
Libérer: 2017-06-21 15:21:18
original
1466 Les gens l'ont consulté

1. Téléchargez et installez le nœud

Visitez , puis cliquez sur le gros bouton vert install Une fois le téléchargement terminé, exécutez le programme directement et tout est prêt. . npm sera installé avec le package d'installation,

2 Ouvrez la ligne de code

<span class="hljs-attribute">node -v //查看node版本,如果显示版本号,则安装成功。</span>node -v //Vérifiez la version du nœud. Si le numéro de version est affiché, l'installation est réussie.

<span class="hljs-attribute">npm -v   //</span>查看npm版本,如果显示版本号,则安装成功。npm -v //

定位到自己项目文件处 例如:cd /Users/ydz/WebstormProjects/bucketMaster

<span class="hljs-attribute">sudo npm install -g gulp // 下载安装gulp</span>

sudo npm install -g gulp // Téléchargez et installez gulp

<span class="hljs-attribute">gulp -v //</span><span class="hljs-attribute">gulp -v / / </span>Vérifiez la version de gulp Si le numéro de version est affiché, l'installation est réussie.npm init //Créez un entrepôt local et générez le fichier package.json pour la configuration

npm init //建立本地仓库,生成package.json文件进行配置

npm <span class="hljs-keyword">install <span class="hljs-keyword">save-dev gulp //Installer gulp localement sur le projet<em><em></em></em> </span></span>npm <span class="hljs-keyword">install <span class="hljs-keyword">save-dev gulp //安装gulp到项目本地</span></span>

npm <span class="hljs -keyword">install </span>gulp-htmlmin //Installer le plug-in HTML compressé npm <span class="hljs-keyword">install </span>

npm <span class="hljs-keyword">installer </span>gulp-uglify //Installer le plug-in js compressénpm <span class="hljs-keyword">install </span>

npm installer gulp-minify-css //Installer le plug-in CSS de compressionnpm <span class="hljs-keyword">install </span>

npm installer gulp-imagemin //Installer le plug-in d'image compressée npm <span class="hljs-keyword">install </span>

npm installer del//Installer le plug-in de suppression de compression npm <span class="hljs-keyword">install </span>

<span class=" hljs-keyword"><span class="hljs-keyword">3, créez un nouveau fichier gulpfile.js </span></span><span class="hljs-keyword"><span class="hljs-keyword">3,新建gulpfile.js文件</span></span>

Écrivez à l'intérieur :

var gulp = require( 'gulp'),

htmlmin = require('gulp -htmlmin'),

    minify=require('gulp-minify-css'),

    uglify=require('gulp-uglify'),

 imagemin=require('gulp-imagemin' ),

del = require('del');

avaler .task('testHtmlmin', function() {

var options = {

 removeComments : true,//清除HTML注释

<em><em><em><em><em><em><em><em><span style="font-family: 宋体; font-size: 15px"><em>        collapseWhitespace: true,//压缩HTML<br>        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input /><br>        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input /><br>        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"<br>        removeStyleLinkTypeAttributes: true//删除<style>和<link>的type="text/css"<br>    };<br>    return gulp.src(['bucketSrc/*/*.html','bucketSrc/*.html'])<br>        .pipe(htmlmin(options))<br>        .pipe(gulp.dest('bucketDist'));<br>});<br>gulp.task('minifycss', function() {<br>    return gulp.src(['bucketSrc/s/c/*/*.css','bucketSrc/s/c/*.css'])      //压缩的文件<br>        .pipe(minify())<br>        .pipe(gulp.dest('bucketDist/s/c')) ; //输出文件夹<br>});<br>gulp.task('minifyjs',function(){<br>    return gulp.src('bucketSrc/s/j/*/*.js')<br>        .pipe(uglify())<br>        .pipe(gulp.dest('bucketDist/s/j'))<br>});<br>gulp.task('clean', function(cb) {<br>    del(['bucketDist/*/*.html','bucketDist/*.html','bucketDist/s/img/*.*','bucketDist/s/c/*/*.css','bucketDist/s/c/*.css','bucketDist/s/j/*/*.js'], cb)<br>});<br>gulp.task('images', function() {<br>    return gulp.src('bucketSrc/s/img/*.*')<br>        .pipe(imagemin({<br>            progressive: false<br>        }))<br>        .pipe(gulp.dest('bucketDist/s/img'));<br>});<br>gulp.task('default', ['clean', 'testHtmlmin', 'minifycss','images','minifyjs']);<br>4,命令行中运行gulp </em><em style="line-height: 1.5"><em>default</em></em></span></em></em></em></em></em></em></em></em>
Copier après la connexion
 <br/>
Copier après la connexion
Copier après la connexion
Copier après la connexion
 <br/>
Copier après la connexion
Copier après la connexion
Copier après la connexion
 <br/>
Copier après la connexion
Copier après la connexion
Copier après la connexion

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