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"
}
}