Gulp

gulpプラグ：gulp-cssnano、gulp-minify-css、gulp-clean-css



Gulp Plug Gulp Cssnano



最近の研究「Webフロントエンド自動ビルド」では、css圧縮プラグインのgulpについて、本はgulp-cssnanoとgulp-minify-cssの2つについて言及し、npm install gulp-minify-css-save-を実行します。コンソールが次のようにプロンプ​​トを表示したときのdev：
npm WARN deprecated root@xxxxx: Please use gulp-clean-css
root@xxxxx
これまでに、cssgulpウィジェットの合計3つの圧縮がありました。

以下を対比してください

圧縮機能：

同じcssファイルが3つのプラグインで圧縮されています。



  • gulp-cssnano：2.55KB；
  • gulp-minify-css：2.44KB
  • gulp-clean-css：2.55KB
維持する：
使用する：

gulp-minify-cssが破棄された場合、この比較のみ、およびgulp-cssnanogulp-clean-css
gulp-cssnano
搭載されています：

npm install gulp-cssnano --save-dev

例：



const gulp = require('gulp') const cssnano = require('gulp-cssnano') gulp.task('styles', () => { return gulp.src('./main.css') .pipe(cssnano()) .pipe(gulp.dest('dist')) })

ソースマップ：

const gulp = require('gulp') const cssnano = require('gulp-cssnano') const sourcemaps = require('gulp-sourcemaps') gulp.task('styles', () => { return gulp.src('main.css') .pipe(sourcemaps.init()) .pipe(cssnano()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist')) })

gulp-clean-css
搭載されています：

npm install gulp-clean-css --save-dev

例：



const gulp = require('gulp') const cleanCSS = require('gulp-clean-css') gulp.task('minify-css', () => { return gulp.src('styles/*.css') .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest('dist')) })

gulp-clean-cssはコールバックをサポートします

const gulp = require('gulp') const cleanCSS = require('gulp-clean-css') gulp.task('minify-css', () => { return gulp.src('styles/*.css') .pipe(cleanCSS({debug: true}, (details) => { console.log(`${details.name}: ${details.stats.originalSize}`) console.log(`${details.name}: ${details.stats.minifiedSize}`) })) .pipe(gulp.dest('dist')) })

サンプルコードは、圧縮の前後にcss統計情報を取得できます。また、分析用の他のパスとファイル名も提供します。
ソースマップ：

const gulp = require('gulp') const cleanCSS = require('gulp-clean-css') const sourcemaps = require('gulp-sourcemaps') gulp.task('minify-css',() => { return gulp.src('./src/*.css') .pipe(sourcemaps.init()) .pipe(cleanCSS()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')) })