gulp으로 css를 모두 통합하여 min파일로 만들어 버리면 파일순으로 하나의 파일을 만들기 떄문에 

responsive.css같이 파일이 순서에 밀려서 css가 안먹는 경우가 발생한다. 


responsive.css의 모든 속성을 !important를 주던지. (설마 이런짓을 하는사람은..)


파일을 따로 관리하는게 가장 편하겠다 싶어서 만들어 보았다. (이러면 index.css / responsive.css 파일을 html에서 링크만 걸어주면되니까)


gulp.task('minifycss', function() {
return gulp.src(['src/css/*.css','!src/css/responsive.css'])
.pipe(concat('index.css'))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css/'))
.pipe(browserSync.reload({stream:true}));
});

gulp.task('minify-responsive-css', function() {
return gulp.src('src/css/responsive.css')
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css/'))
.pipe(browserSync.reload({stream:true}));
});


먼저 통합으로 테스트하나를 만들지마나 경로에 !를 통해서 원하는 파일만 제외 시켜 주고


다시 테스크로 제외시켰던 파일만 해당 디렉토리로 옮겨준다. 


그리고 html에서 link걸어주면 끝!



- 참고  : https://gulp.readme.io/docs/gulpsrcglobs-options

- 더 좋은 방법이 있는지는 찾아봐야 겟따...

저작자 표시
신고

'web > gulp' 카테고리의 다른 글

gulp Error: watch ENOSPC  (0) 2016.08.01
gulp command does not work  (0) 2016.07.31
ecma6 javascript 를 위한 gulp babel  (0) 2016.06.08
gulp 특정 파일은 제외  (0) 2016.06.02

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret