gulp
CSS 축소

gulp-clean-css 및 gulp-rename 사용

첫째, 설치 gulp , gulp-clean-css 하고 gulp-rename 및 localY 디렉토리를 프로젝트

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

gulpfile.js 에 다음 gulpfile.js minify-css 작업을 추가하십시오 gulpfile.js

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');

gulp.task('minify-css', function() {
    return gulp.src('css/dist/dist.css')
        .pipe(cleanCSS())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('css/dist'));
});

gulp.task('watch', function(){
  gulp.watch('css/dist/**/*.css', ['minify-css']); 
  // Other watchers
});

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

여기 .pipe(cleanCSS()) 는 css/dist/dist.css 파일의 css/dist/dist.css 실행하고 .pipe(rename('concat.min.css')) 는 dist.min.css 이름을 dist.min.css

Sass 및 Css - Gulp를 사용한 전처리

꿀꺽 node.js 전에 node.js 와 npm 을 설치해야합니다. 그런 다음 gulp-sacc을 설치하십시오.

$ npm i gulp-sass --save-dev // i = install

꿀꺽 머리

var gulp = require('gulp');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');

꿀꺽 꿀꺽 마른 시체

gulp.task('sass', function(){
  return gulp.src('app/scss/*.scss') // searching for sass files
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css')) // destination of the css file
});

걸프 시계

gulp.task('watch', function(){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  // Other watchers
})