gulp チュートリアル gulp-minify-css_html/css_WEB-ITnose

概要:

gulp-minify-css を使用して CSS ファイルを圧縮し、ファイル サイズを削減し、参照 URL にバージョン番号を追加してキャッシュを回避します。重要: gulp-minify-css は非推奨になりました。一貫した使用法で gulp-clean-css を使用してください。

1.nodejs をインストールする/gulp をグローバルにインストールする/gulp をローカルにインストールする/package.json と gulpfile.js ファイルを作成する

1.1. gulp の基本的な使い方をまだマスターしていませんか? gulp の詳細な入門チュートリアル

1.2. この例のディレクトリ構造は次のとおりです:

2. gulp-minify-css をローカルにインストールします

2.1. github: https://github.com/jonathanepollack/gulp-minify-css

2.2. インストール: コマンド プロンプトの実行 cnpm install gulp-minify-css --save-dev

2.3. 注: cnpm はインストールされていません。 npm install gulp-minify-css --save-dev cnpm とは何か、およびその方法インストールしますか？

2.4. 説明: --save-dev は、package.json の devDependency ノードに構成情報を保存します。 package.json に保存する理由

3. gulpfile.js の設定

3.1. 基本的な使用法

var gulp = require ( 'gulp' ) ,

cssmin = require ( 'gulp-minify-css' ) ;

gulp . task ( 'testCssmin' , function ( ) {

gulp . src ( 'src/css/*.css' )

. pipe ( cssmin ( ) )

. pipe ( gulp . dest ( 'dist/css' ) ) ;

} ) ;

var gulp = require ( 'gulp' ) ,

cssmin = require ( 'gulp-minify-css' ) ;

var gulp = require ( 'gulp' ) ,

cssmin = require ( 'gulp-minify-css' ) ;

gulp . task ( 'testCssmin' , function ( ) {

gulp . src ( 'src/css/*.css' )

. pipe ( cssmin ( {

advanced : false , //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]

compatibility : 'ie7' , //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]

keepBreaks : true //类型：Boolean 默认：false [是否保留换行]

} ) )

. pipe ( gulp . dest ( 'dist/css' ) ) ;

} ) ;

gulp . task ( 'testCssmin' , {

gulp . src ( 'src/css/*.css' )

. パイプ ( cssmin ( ) )

. パイプ ( gulp . dest ( 'dist/css' ) ) ;

var gulp = require ( 'gulp' ) ,

cssmin = require ( 'gulp-minify-css' ) ;

//确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]

cssver = require ( 'gulp-make-css-url-version' ) ;

gulp . task ( 'testCssmin' , function ( ) {

gulp . src ( 'src/css/*.css' )

. pipe ( cssver ( ) ) //给css文件里引用文件加版本号（文件MD5）

. pipe ( cssmin ( ) )

. pipe ( gulp . dest ( 'dist/css' ) ) ;

} ) ;

} ) ;

/*!

Important comments included in minified output.

*/

3.2、gulp-minify-css は最終的に clean-css を呼び出します。ここで他のパラメータを参照してください

var gulp = require ( 'gulp' ) , cssmin = require ( 'gulp-minify-css' ) ;

gulp . task ( 'testCssmin' , function ( ) {

gulp . src ( 'src/css/*.css' )

. Pipe ( cssmin ( {

Advanced : false , //Type: Boolean Default: true [高度な最適化（セレクターのマージなど）を有効にするかどうか]

互換性 : 'ie7' , // ie7 以下を保持互換性 書き込みタイプ: 文字列 デフォルト: ''または'*' [互換モードを有効にする; 'ie7': IE7 互換モード、'ie8': IE8 互換モード、'*': IE9+ 互換モード] keepBreaks: true //型: ブール型 デフォルト: false [改行を保持するかどうか] } ) ) . Pipe ( gulp . dest ( 'dist/css' ) ) ; 🎜> } ) ;

3.3. CSS ファイルの参照 URL にバージョン番号を追加します (MD5 製品バージョンに基づいています)。参照ファイルの番号)、次のように:

var gulp = require ( 'gulp' ) , cssmin = require ( 'gulp -minify-css' ) ; // gulp-make-css-url-version がローカルにインストールされていることを確認します [cnpm install gulp-make-css-url-version] --save-dev] cssver = require ( 'gulp-make-css-url-version' ) ; gulp . task ( 'testCssmin' , function ( ) { gulp . src ( 'src/ css/*.css' ) . Pipe ( cssver ( ) ) // CSS ファイル内の参照ファイル (ファイル MD5) にバージョン番号を追加します。 . パイプ ( cssmin ( ) ) . パイプ ( gulp . dest ( 'dist/css' ) ) ;

3.3. コメントを保持したい場合は、次のようにコメントしてください:

/ *! 縮小された出力に含まれる重要なコメント。 */

4. 実行します。タスク 4.1. コマンドプロンプトの実行: gulp testCssmin 5. エラーがある場合この記事をご覧になるか、ご質問がございましたら、メッセージを残してください。 出典: http://www.ydcss.com/archives/41