css スプライト合并_html/css_WEB-ITnose

今日、node.js が v4.0.0 をリリースしました。koa を実行するときに、node --harmony が必要なくなりました。

午後、同僚が CSS スプライトのリクエストを提起しました。これには、マージの作業負荷を軽減するために、作成時に小さな画像を引用し、公開時に大きな画像を合成するツールを使用する必要があります。 fis3 はこれを行うことができるので、思い切って使用してください。

• npm install fis3 -g

• fis3 release -d ./dist

duang!!! csssprite モジュールが最新バージョンの Node.js をサポートしていないという警告があります。

問題はありません、バージョンを変更して作業を続ければ問題ありません。

生成された画像とスタイル ファイルを比較します。画像は結合され、スタイル ファイルは置き換えられます。これは非常に優れています。

これで問題は終わったと単純に考えましたが、しばらくすると、プロジェクトが実行できなくなり、ファイル参照が絶対パスになっていることがわかりました。

ファイルを比較すると、fis3 は、background:url(../images) を、fis チームが述べた 3 つの言語におけるリソースの位置付けである、background:url(/images) に置き換えていることがわかりました。

しかし、私が欲しいのはスプライトマップの機能だけであり、fisのソリューション全体は必要ありません。すべてのパスを置き換えるにはどうすればよいですか?

fis3 の API を調べたところ、この置換機能が削除されていることがわかり、ソース コードも確認しましたが、関連する設定項目は見つかりませんでした。

gulpを使って自分で書いてこの関数をコピーしたいと思います。ソースコードをよく見てみると、このモジュールは fis に大きく依存しており、画像の位置に関するパフォーマンスの最適化も行っており、非常に面倒です。

いろいろ考えた結果、プロセスを再パッケージ化することにしました。

その後も fis3 を使用してスプライト画像を生成します。その後、gulp を再度実行し、css パスを元に戻し、css とスプライト画像ファイルを別の場所に移動し、fis3 によって生成されたディレクトリを削除します。

コードは大まかに次のようになります:

gulp.task('sprite',function(){    return shell.task('fis3 release -d ./dist')();});gulp.task('replace',function(){    return gulp.src(['./dist/css/**/*'])        .pipe(through.obj(function(file,enc,cb){                            replaceImageUrl();            this.push(file);            cb();                    }))        .pipe(gulp.dest('./css/'))});gulp.task('default',function(){        return sequence(        'sprite',        'replace',        'clean'    )();})

午後中ずっと作業してきたので、記録します。