Gulp スタディ ガイド CSS マージ、圧縮、MD5 命名およびパス置換_html/css_WEB-ITnose

前回の記事: Gulp 学習ガイドに引き続き、ここでは主に gulp を使用して、ファイル内に導入された CSS ファイルのマージ、圧縮、MD5 命名、置換を記録します。 もちろん、この一連の操作は gulp に基づいています。次のプラグインが使用されます:

var concat = require('gulp-concat');//- 多个文件合并为一个；var minifyCss = require('gulp-minify-css');//- 压缩CSS为一行； var rev = require('gulp-rev');//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');//- 路径替换

Gulp プラグインをローカル プロジェクトにインストールします

npm init//- 生成一个 package.json，里面是一些常规的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安装插件到项目目录内

上記 2 つの手順を完了すると、package.json ファイルと node_modules ディレクトリが生成されます。プロジェクト

設定ファイル gulpfile.js を作成します

プロジェクトのルート ディレクトリに gulpfile.js ファイルを作成します (このファイル名である必要があります~)。内容は上記のプラグインの設定情報です:

var gulp = require('gulp');var concat = require('gulp-concat');                            //- 多个文件合并为一个；var minifyCss = require('gulp-minify-css');                     //- 压缩CSS为一行；var rev = require('gulp-rev');                                  //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');               //- 路径替换gulp.task('concat', function() {                                //- 创建一个名为 concat 的 task    gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])    //- 需要处理的css文件，放到一个字符串数组里        .pipe(concat('wap.min.css'))                            //- 合并后的文件名        .pipe(minifyCss())                                      //- 压缩处理成一行        .pipe(rev())                                            //- 文件名加MD5后缀        .pipe(gulp.dest('./css'))                               //- 输出文件本地        .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json        .pipe(gulp.dest('./rev'));                              //- 将 rev-manifest.json 保存到 rev 目录内});gulp.task('rev', function() {    gulp.src(['./rev/*.json', './application/**/header.php'])   //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件        .pipe(revCollector())                                   //- 执行文件内css名的替换        .pipe(gulp.dest('./application/'));                     //- 替换后的文件输出的目录});gulp.task('default', ['concat', 'rev']);

実行結果

上記の構成を渡した後、gulp の実行を開始してプロジェクトに関連する操作を実行できます

gulp コマンドを使用して Gulp.js ビルド プログラムを実行します

まず concat タスクを実行して rev-manifest.json を生成します。 file

次に、rev タスクを実行してファイルを置き換えます 導入された CSS

YuanWingdeMacBook-Pro:m YuanWing$ gulp concat[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js[11:47:03] Starting 'concat'...[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js[11:47:17] Starting 'rev'...[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$ 

rev-manifest.json ファイルの内容:

{  "wap.min.css": "wap.min-c49f62a273.css"}

header.php 置き換え前後の比較:

置き換え前:

置換後:

gulp-rev-collector は rev -manifest.json に基づいてファイル パスを置き換えるので、最初に .json ファイルを生成してからそれを置き換える必要があります

結論

上記で使用したプラグインはごく一部のみを使用します。独自の関数に興味があります。ご自身で体験していただけます:

gulp-rev

gulp-rev-collector
gulp-minify-css
gulp-concat