Gulpfile 중요 CSS 솔루션

Question

Gulp 및 SASS를 사용하여 로컬에서 개발하여 동적 사이트 (CMS 기반) 용 CSS를 컴파일합니다. 글로벌 대 CSS를 컴파일하는 솔루션을 구성하려고합니다. 지금까지 가장 좋은 아이디어는 내 주요 scss 파일을 사이트 템플릿 전용 파일 (예 : templateA.scss, templateB.scss 등)로 분할하는 것입니다. 그런 다음 템플릿으로 템플릿에 템플릿으로 가져온 개별 CSS를 출력하고 축소 할 수 있습니다 .

제 질문은 gulpfile.js가이를 편리하게 구성하는 방법에 관한 것입니다. "template A"(실제로 사이트의 홈페이지)에 대한 작업을 설정했습니다. 나는 중요한 CSS를 활용할 4-5 개의 추가 템플릿을 가지고 있으며이를 추가하는 최선의 방법에 대한 피드백을 원합니다. '글로벌 CSS'에 대한 하나 '에 대한 다른 - 당신이 개하는 SCS 파일과 거래를 볼 수

gulp.task('home', function() { 
return gulp.src([ 
    'scss/home.scss' 
    ]) 
    .pipe(sass({ 
     includePaths: [ 
      paths.bower + '/foundation-sites/scss' 
     ] 
    })) 
    .pipe(autoprefixer({ 
     browsers: ['last 2 versions', 'ie >=9'] 
    })) 
    .pipe(concat('home.css')) 
    .pipe(gulp.dest(paths.assets + '/styles/crpath-css')) 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('assets/styles/crpath-css')) 
    .pipe(sync.stream()); 
}); 

그리고 말대꾸 작업 :

다음은 홈페이지 SCSS 취급 상기 작업의 홈 css '.

gulp.task('sass', function() { 
return gulp.src('scss/app.scss') 
.pipe($.sass({ 
    includePaths: sassPaths, 
    outputStyle: 'expanded' 
}) 
    .on('error', $.sass.logError)) 
.pipe($.autoprefixer({ 
    browsers: ['last 2 versions', 'ie >= 9'] 
})) 
.pipe(concat('styles.dev.css')) 
.pipe(gulp.dest('assets/styles')); 

return gulp.src('scss/home.scss') 
.pipe($.sass({ 
    includePaths: sassPaths 
}) 
    .on('error', $.sass.logError)) 
.pipe($.autoprefixer({ 
    browsers: ['last 2 versions', 'ie >= 9'] 
})) 
.pipe(concat('home.css')) 
.pipe(gulp.dest('assets/styles/crpath-css')) 
.pipe(cleanCSS({compatibility: 'ie8'})) 
.pipe(gulp.dest('assets/styles/crpath-css')); 
}); 

각 scss 파일을 파이프 처리 (및보기)하려면 별도의 작업을 만들어야합니까? 필요한 경우

, 여기에 전체의 gulpfile입니다 :

var gulp = require('gulp'); 
var autoprefixer = require('gulp-autoprefixer'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var cleanCSS = require('gulp-clean-css'); 
var sync = require('browser-sync').create(); // create a browser sync instance. 

var paths = { 
    'bower': 'bower_components', 
    'assets': 'assets' 
}; 

var mypath = { 
    'mycss': 'css' 
}; 

gulp.task('styles', function() { 
    return gulp.src([ 
     'scss/app.scss' 
     ]) 
     .pipe(sass({ 
      includePaths: [ 
       paths.bower + '/foundation-sites/scss' 
      ] 
     })) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions', 'ie >=9'] 
     })) 
     .pipe(concat('styles.dev.css')) 
     .pipe(gulp.dest(paths.assets + '/styles')); 
}); 

gulp.task('home', function() { 
    return gulp.src([ 
     'scss/home.scss' 
     ]) 
     .pipe(sass({ 
      includePaths: [ 
       paths.bower + '/foundation-sites/scss' 
      ] 
     })) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions', 'ie >=9'] 
     })) 
     .pipe(concat('home.css')) 
     .pipe(gulp.dest(paths.assets + '/styles/crpath-css')) 
     .pipe(cleanCSS({compatibility: 'ie8'})) 
     .pipe(gulp.dest('assets/styles/crpath-css')) 
     .pipe(sync.stream()); 
}); 

gulp.task('sass', function() { 
    return gulp.src('scss/app.scss') 
    .pipe($.sass({ 
     includePaths: sassPaths, 
     outputStyle: 'expanded' 
    }) 
     .on('error', $.sass.logError)) 
    .pipe($.autoprefixer({ 
     browsers: ['last 2 versions', 'ie >= 9'] 
    })) 
    .pipe(concat('styles.dev.css')) 
    .pipe(gulp.dest('assets/styles')); 

    return gulp.src('scss/home.scss') 
    .pipe($.sass({ 
     includePaths: sassPaths 
    }) 
     .on('error', $.sass.logError)) 
    .pipe($.autoprefixer({ 
     browsers: ['last 2 versions', 'ie >= 9'] 
    })) 
    .pipe(concat('home.css')) 
    .pipe(gulp.dest('assets/styles/crpath-css')) 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('assets/styles/crpath-css')); 
    }); 

gulp.task('minify-css', function() { 
    return gulp.src('assets/styles/crpath-css/*.css') 
    .pipe(cleanCSS({compatibility: 'ie8'})) 
    .pipe(gulp.dest('assets/styles/crpath-css')); 
}); 

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

    sync.init({ 
    injectChanges: true, 
    proxy: 'localhost/wesleypicotte' 
    }); 

    gulp.watch('scss/**/*.scss', ['styles']); 
    gulp.watch('scss/**/*.scss', ['home']); 
    gulp.watch('scss/**/*.scss').on('change', sync.reload); 
}); 

gulp.task('default', ['styles', 'home', 'minify-css']); 

Answer 1

당신은 당신의 SRC 선언 return gulp.src('./**/*.scss', '!**/_*.scss')에 globs의를 사용할 수 있으며이 _로 시작되지 않는 모든 파일을 잡아해야합니다. home.scss 및 main.scss은 home.css 및 main.css으로 컴파일되지만 _buttons.scss은 다른 파일에 포함 된 경우에만 준수됩니다. 모든 파일은 동일한 디렉토리에 출력되므로 다른 구조로 보려는 경우 보길 원할 수 있습니다. https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md