Running Gulp and I get this error: File to import not found or unreadable: util/util
Running Gulp and I get this error: File to import not found or unreadable: util/util
所以我在使用 gulp 方面还很陌生,我在让我的基础 6 正确编译时遇到了问题。
我不断收到此错误:
未找到或无法读取要导入的文件:util/util
我认为这可能是某种路径问题,但我似乎无法弄清楚。
这是我的gulpfile.js
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('assets/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('assets/js'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('assets/js/*.js', ['lint', 'scripts']);
gulp.watch('assets/scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
主 SCSS 文件。
@charset 'utf-8';
@import 'settings';
@import 'foundation';
@import 'motion-ui';
@include foundation-global-styles;
@include foundation-grid;
// @include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
// @include foundation-progress-element;
// @include foundation-meter-element;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
// @include foundation-flex-classes;
@include motion-ui-transitions;
@include motion-ui-animations;
// NOUVEAU mixins, including image-url() fix
@import "nv-mixins";
// Load NOUVEAU compatibility styles
@import "nv-wordpress";
// Color
$brand-orange: #ff9900;
$brand-hove-blue: #0066cc;
$brand-blue: #181826;
$brand-dark-blue: #1b1b25;
$brand-dark-blue2: #181826;
$brand-light-grey: rgba(206, 206, 208, 0.5);
$brand-orange-rgba: rgba(255, 153, 0, 0.5);
$brand-blue-rgba: rgba(0, 102, 204, 0.5);
@import 'parts/general';
@import 'parts/header';
@import 'pages/home';
@import 'pages/insurance';
@import 'pages/news';
@import 'pages/why-us';
@import 'pages/contact';
@import 'parts/footer';
这是我的文件夹结构的屏幕截图。
http://puu.sh/nTIZ0/01f8065605.png
发生错误的行
http://puu.sh/nTJ1x/42301e8ed1.png
控制台错误
尝试为您的 sass 任务使用 glob,以便它检查子文件夹。
gulp.task('sass', function() {
return gulp.src('assets/scss/**/*.scss') // This Line
.pipe(sass())
.pipe(gulp.dest('assets/css'));
});
尝试这样的事情:
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded',
includePaths: 'bower_components/foundation-sites/scss'
};
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('assets/scss/*.scss')
.pipe(sass(sassOptions))
.pipe(gulp.dest('assets/css'));
});
看看 Zurb 模板 - 我从中复制了很多东西。
但我认为您面临的主要问题是您没有告诉您的构建脚本在哪里寻找 Foundation。
所以我在使用 gulp 方面还很陌生,我在让我的基础 6 正确编译时遇到了问题。
我不断收到此错误:
未找到或无法读取要导入的文件:util/util
我认为这可能是某种路径问题,但我似乎无法弄清楚。
这是我的gulpfile.js
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// Lint Task
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('assets/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('assets/css'));
});
// Concatenate & Minify JS
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('assets/js'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/js'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('assets/js/*.js', ['lint', 'scripts']);
gulp.watch('assets/scss/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
主 SCSS 文件。
@charset 'utf-8';
@import 'settings';
@import 'foundation';
@import 'motion-ui';
@include foundation-global-styles;
@include foundation-grid;
// @include foundation-flex-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
// @include foundation-progress-element;
// @include foundation-meter-element;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
@include foundation-float-classes;
// @include foundation-flex-classes;
@include motion-ui-transitions;
@include motion-ui-animations;
// NOUVEAU mixins, including image-url() fix
@import "nv-mixins";
// Load NOUVEAU compatibility styles
@import "nv-wordpress";
// Color
$brand-orange: #ff9900;
$brand-hove-blue: #0066cc;
$brand-blue: #181826;
$brand-dark-blue: #1b1b25;
$brand-dark-blue2: #181826;
$brand-light-grey: rgba(206, 206, 208, 0.5);
$brand-orange-rgba: rgba(255, 153, 0, 0.5);
$brand-blue-rgba: rgba(0, 102, 204, 0.5);
@import 'parts/general';
@import 'parts/header';
@import 'pages/home';
@import 'pages/insurance';
@import 'pages/news';
@import 'pages/why-us';
@import 'pages/contact';
@import 'parts/footer';
这是我的文件夹结构的屏幕截图。
http://puu.sh/nTIZ0/01f8065605.png
发生错误的行
http://puu.sh/nTJ1x/42301e8ed1.png
控制台错误
尝试为您的 sass 任务使用 glob,以便它检查子文件夹。
gulp.task('sass', function() {
return gulp.src('assets/scss/**/*.scss') // This Line
.pipe(sass())
.pipe(gulp.dest('assets/css'));
});
尝试这样的事情:
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded',
includePaths: 'bower_components/foundation-sites/scss'
};
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('assets/scss/*.scss')
.pipe(sass(sassOptions))
.pipe(gulp.dest('assets/css'));
});
看看 Zurb 模板 - 我从中复制了很多东西。
但我认为您面临的主要问题是您没有告诉您的构建脚本在哪里寻找 Foundation。