2016-08-27 2 views
1

У меня есть Less задачи в моем Глоток сценарий, но он не работает, как он должен:Глоток Меньше задача не делать ничего

Он должен собрать меньше файлов и переместить их в «сборки/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

Кажется, проблема с GULP-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})); 
}); 
Смежные вопросы