2016-08-27 10 views
1

을하고 있지,하지만 그것 같이 작동하지 않습니다 :꿀꺽 적은 작업은 내가 꿀꺽 스크립트에서 적은 작업이 아무것도

1 덜 파일을 컴파일 및 '빌드/CSS'로 이동하기로했다 폴더. 그러나 어떤 이유로 그것은 작동하지 않습니다. 왜?

오류를 기록하기 위해 gulp-util을 사용하려고했습니다. 가져온 적은 파일에서 잘못된 파일 이름을 찾습니다. 하지만 정의되지 않은 클래스는 감지하지 못합니다. 그리고 파일이 컴파일되지 않는 이유를 나타내지는 않습니다.

힌트를 보내 주시면 감사하겠습니다.

gulpfile.js

var gulp   = require("gulp"), 
    util   = require('gulp-util'), 
    minifyHTML  = require("gulp-minify-html"), 
    concat   = require("gulp-concat"), 
    uglify   = require("gulp-uglify"), 
    cssmin   = require("gulp-cssmin"), 
    uncss   = require("gulp-uncss"), 
    imagemin  = require("gulp-imagemin"), 
    sourcemaps  = require("gulp-sourcemaps"), 
    inject   = require("gulp-inject"), 
    less   = require("gulp-less"), 
    filter   = require("gulp-filter"), 
    glob   = require("glob"), 
    browserSync = require("browser-sync"), 
    LessPluginAutoPrefix = require('less-plugin-autoprefix'), 
    autoprefix  = new LessPluginAutoPrefix({ 
     browsers: ["last 2 versions"] 
    }); 

var config = { 
    paths: { 
     html: { 
      src: "src/**/*.html", 
      dest: "build" 
     }, 
     javascript: { 
      src: ["src/js/**/*.js"], 
      dest: "build/js" 
     }, 
     css: { 
      src: ["src/css/**/*.css"], 
      dest: "build/css" 
     }, 
     less: { 
      src: ["src/less/**/*.less", "!src/less/includes/**"], 
      dest: "build/css" 
     }, 
     images: { 
      src: ["src/images/**/*.jpg", "src/images/**/*.jpeg", "src/images/**/*.png"], 
      dest: "build/images" 
     }, 
     audio: { 
      src: "src/audio/**/*.mp3", 
      dest: "build/audio" 
     } 
    } 
}; 

gulp.task("html", function(){ 
    return gulp.src(config.paths.html.src) 
     .pipe(minifyHTML()) 
     .pipe(gulp.dest(config.paths.html.dest)); 
}); 

gulp.task("scripts", function(){ 
    return gulp.src(config.paths.javascript.src) 
     .pipe(sourcemaps.init()) 
     .pipe(concat("app.min.js")) 
     .pipe(uglify()) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest(config.paths.javascript.dest)); 
}); 

gulp.task("css", function(){ 
    return gulp.src(config.paths.css.src) 
     .pipe(sourcemaps.init()) 
     .pipe(cssmin()) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(config.paths.css.dest)) 
     .pipe(browserSync.reload({stream: true})); 
}); 

gulp.task("less", function(){ 
    return gulp.src(config.paths.less.src) 
     .pipe(sourcemaps.init()) 
     .pipe(less({ 
      paths: ["node_modules/bootstrap/less"], 
      plugins: [autoprefix] 
     })) 
     .pipe(uncss({ 
      html: glob.sync(config.paths.html.src) 
     })) 
     .pipe(concat("main.min.css")) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(config.paths.less.dest)) 
     .pipe(filter("**/*.css")) 
     .pipe(browserSync.reload({stream: true})); 
}); 

gulp.task("images", function(){ 
    return gulp.src(config.paths.images.src) 
     .pipe(imagemin({ 
      progressive: true, 
      interlaced: true 
     })) 
     .pipe(gulp.dest(config.paths.images.dest)); 
}); 

gulp.task("audio", function() { 
    return gulp.src([config.paths.audio.src]).pipe(gulp.dest(config.paths.audio.dest)); 
}); 

gulp.task("browser-sync", function() { 
    browserSync({ 
     server: { 
      baseDir: "./build" 
     } 
    }); 
}); 

gulp.task("build", ["html", "scripts", "css", "less", "images", "audio"]); 

gulp.task("default", ["build", "browser-sync"], function(){ 
    gulp.watch(config.paths.html.src, ["html", browserSync.reload]); 
    gulp.watch(config.paths.javascript.src, ["scripts", browserSync.reload]); 
    gulp.watch(config.paths.css.src, ["css"]); 
    gulp.watch(config.paths.less.src, ["less"]); 
    gulp.watch(config.paths.images.src, ["images", browserSync.reload]); 
    gulp.watch(config.paths.audio.src, ["audio", browserSync.reload]); 
}); 

package.json

{ 
    "name": "ofj-simon-says", 
    "version": "0.1.0", 
    "description": "Click a color sequence", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "bower": "^1.3.12", 
    "browser-sync": "^2.14.0", 
    "glob": "^7.0.6", 
    "gulp": "^3.8.10", 
    "gulp-concat": "^2.4.1", 
    "gulp-cssmin": "^0.1.6", 
    "gulp-filter": "^4.0.0", 
    "gulp-imagemin": "^3.0.3", 
    "gulp-inject": "^4.1.0", 
    "gulp-less": "^3.1.0", 
    "gulp-minify-html": "^1.0.6", 
    "gulp-sourcemaps": "^1.2.8", 
    "gulp-uglify": "^2.0.0", 
    "gulp-uncss": "^1.0.6", 
    "gulp-util": "^3.0.7", 
    "less-plugin-autoprefix": "^1.5.1", 
    "main-bower-files": "^2.4.0" 
    }, 
    "dependencies": { 
    "bootstrap": "^3.3.7" 
    } 
} 

답변

0

는 꿀꺽 꿀꺽 - uncss 플러그인에 문제가 될 것으로 보인다. 제거하면 모든 것이 작동합니다. 최신 버전 1.0.6으로 업데이트하려고했지만 아무 소용이 없습니다. 문제가 무엇인지 말하기 전에 더 깊이 조사해야 할 것입니다. 지금은 적은 작업에서 uncss()를 제거합니다.

gulp.task("less", function(){ 
    return gulp.src(config.paths.less.src) 
     .pipe(sourcemaps.init()) 
     .pipe(less({ 
      plugins: [autoprefix] 
     }).on('error', util.log)) 
     .pipe(concat('main.min.css')) 
     //.pipe(uncss({ 
     // html: glob.sync(config.paths.html.src) 
     //})) 
     .pipe(nano()) 
     .pipe(sourcemaps.write(".")) 
     .pipe(gulp.dest(config.paths.less.dest)) 
     .pipe(browserSync.reload({stream: true})); 
}); 
관련 문제