효율적으로

Question

나는 내가 사용 꿀꺽 꿀꺽 파일을 가지고 있으며 표준 비 압축.css 파일.css 파일을 압축 된 를 생성하는 과정을 포함; 이전에 생성 된 비 압축 파일을 축소하여 간단하게 압축 된 버전을 생성했지만, 실제로는 .scss 파일에서 실제로 작동하지 않았기 때문에 .scss 파일이 아닌 압축되지 않은 .css 파일을 가리키는 매핑 문제가 발생했습니다.

두 프로세스가 모두 .scss 파일을 사용하도록 변경 했으므로 둘 다 동일한 프로세스를 거쳐야하므로 매우 비효율적 인 것처럼 보입니다. 여기

내 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()); 
}); 

나는에 대한 올바른 매핑 파일을 만들 수있는이 작업을 수행하는보다 효율적인 방법이 있나요 모두 비 압축 및 이 버전을 압축?

Answer 1

나는 gulp-clean-css을 사용하여 gulp-cssnano was super slow을 사용하므로 적어도 작업 속도를 높일 수 있습니다. gulp-if과 별도의 variables 모듈을 사용하여 일부 설정을 전환하고 동일한 작업을 두 번 호출 할 수 있습니다. 따라서 gulp-watch과 함께 사용할 수 있으므로 rename 및 isProduction = true 인 경우 'cssnano', isProduction = false 인 경우 liveReload 만 호출합니다. 나는 이것을 테스트하지는 않았지만 효과가있다!

는

module.export = { 
    isProduction = false, 
    outputStyle = 'expanded' 
}; 

gulpfile.js

var vars = require('./variables'), 
    runSequence = require('run-sequence') 
    gulpif = require('gulp-if'); 

gulp.task('build',() => { 
    runSequence('set-dev', 'css', 'set-prod', 'css'); 
}); 

gulp.task('set-dev',() => { 
    vars.isProduction = false; 
    vars.outputStyle = 'expanded'; 
}); 

gulp.task('set-prod',() => { 
    vars.isProduction = true; 
    vars.outputStyle = 'compressed'; 
}); 

gulp.task('css', 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: vars.outputStyle // Options: nested, expanded, compact, compressed 
     })) 
     .pipe(postcss([ // Parse with PostCSS plugins. 
      autoprefixer(ap_options), 
     ])) 
     .pipe(gulpif(vars.isProduction(cssnano({ // Minify CSS 
      safe: true // Use safe optimizations 
     })))) 
     .pipe(gulpif(vars.isProduction(rename({ suffix: '.min' })))) // Append our suffix to the name 
     .pipe(sourcemaps.write('../maps')) // Create sourcemap. 
     .pipe(gulp.dest('./css/')) // Create style.min.css. 
     .pipe(gulpif(!vars.isProduction(livereload()))); 
}); 

EDIT

출력 한 작업 중 정상적인 압축 CSS를 variables.js. 두 개의 대상이 필요합니다.

var gulp = require('gulp'), 
    $ = require('gulp-load-plugins')(); 

gulp.task('css', 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($.sourcemaps.write()) // Create sourcemap. 
     .pipe(gulp.dest('./css/')) // Create style.min.css. 
     //** MIN VERSION HERE 
     .pipe($.sass({ // Compile Sass using LibSass. 
      errLogToConsole: true, 
      outputStyle: "compressed" // Options: nested, expanded, compact, compressed 
     })) 
     .pipe($.cleanCss({ 
      keepSpecialComments: '*', 
      spaceAfterClosingBrace: true 
     })) 
     .pipe($.rename({ suffix: '.min' })) // Append our suffix to the name 
     .pipe(gulp.dest('./css/')); 
});