3

使用する gulp ファイルがあり、標準の非圧縮 .cssファイルと圧縮 .cssファイルを作成するプロセスが含まれています。以前は、生成されたばかりの非圧縮バージョンを縮小するだけで圧縮バージョンを生成していましたが、実際にはファイルが機能しないため.css、ファイルではなく非圧縮ファイルを指すマッピングで問題が発生しました。.scss.scss

そのため、両方のプロセスがファイルを使用するように変更しました.scssが、それぞれのファイルを構築できるように両方が同じプロセスを経る必要があるため、これは非常に非効率的です。

my の関連部分は次のgulpfile.jsとおりです。

 var gulp = require('gulp');
 var cssnano = require('gulp-cssnano');
 var plumber = require('gulp-plumber');
 var postcss = require('gulp-postcss');
 var rename = require('gulp-rename');
 var sass = require('gulp-sass');
 var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 var livereload = require('gulp-livereload');
 var autoprefixer = require('autoprefixer');

 var ap_options = {
     browsers: [
         'last 4 Chrome versions',
         'last 4 Firefox versions',
         'last 4 Edge versions',
         'last 2 Safari versions',
         'ie >= 10',
         '> 1.49%',
         'not ie <= 9'
     ],
 };

 gulp.task('postcss', function() {
     return gulp.src('scss/*.scss')
         .pipe(plumber()) // Deal with errors.
         .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap.
         .pipe(sass({ // Compile Sass using LibSass.
             errLogToConsole: true,
             outputStyle: 'expanded' // Options: nested, expanded, compact, compressed
         }))
         .pipe(postcss([ // Parse with PostCSS plugins.
             autoprefixer(ap_options),
         ]))
         .pipe(sourcemaps.write('../maps')) // Create sourcemap.
         .pipe(gulp.dest('./css/')) // Create style.css.
         .pipe(livereload());
 });

 gulp.task('cssnano', ['postcss'], function() {
     return gulp.src('scss/*.scss')
         .pipe(plumber()) // Deal with errors.
         .pipe(sourcemaps.init()) // Wrap tasks in a sourcemap.
         .pipe(sass({ // Compile Sass using LibSass.
             errLogToConsole: true,
             outputStyle: 'compressed' // Options: nested, expanded, compact, compressed
         }))
         .pipe(postcss([ // Parse with PostCSS plugins.
             autoprefixer(ap_options),
         ]))
         .pipe(cssnano({ // Minify CSS
             safe: true // Use safe optimizations
         }))
         .pipe(rename({ suffix: '.min' })) // Append our suffix to the name
         .pipe(sourcemaps.write('../maps')) // Create sourcemap.
         .pipe(gulp.dest('./css/')) // Create style.min.css.
         .pipe(livereload());
 });

圧縮バージョンと圧縮バージョンの両方に正しいマッピング ファイルを作成できる、より効率的な方法はありますか?

4

1 に答える 1