Answer the question
In order to leave comments, you need to log in
What does this GULP error mean?
Dear participants, help me figure out what's wrong?
I made the gulpfile.js assembly according to this lesson and I am trying to complete the assembly according to this lesson .
In main.sass, the first lines of Dmitrijs Balcers "bootstrap";
Dmitrijs Balcers "bootstrap/theme";
Directory structure
app
-css
--main.css
-fonts
-img
-js
-sass
--main.sass
index.html
dist
-css
-fonts
nodemodules
-bootstrap-sass Error
when running gulp build:
C:\project>gulp watch
[20:52:44] Using gulpfile C:\project\gulpfile.js
[20:52:44] Starting 'browser-sync'...
[20:52:44] Finished 'browser-sync' after 465 ms
[20:52:44] Starting 'sass'...
[20:52 :44] Starting 'scripts'...
events.js:154
throw er; // Unhandled 'error' event
^
Error: app\sass\main.sass
Error: File to import not found or unreadable: bootstrap
Parent style sheet: C:/project/app/sass/main.sass
on line 1 of app/ sass/main.sass
>> Dmitrijs Balcers "bootstrap";
^
at options.error (C:\project\node_modules\node-sass\lib\index.js:271:32)
Code file in gulpfile.js
var gulp = require('gulp'), // Подключаем Gulp
sass = require('gulp-sass'), //Подключаем Sass пакет,
browserSync = require('browser-sync'), // Подключаем Browser Sync
concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
del = require('del'), // Подключаем библиотеку для удаления файлов и папок
imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
cache = require('gulp-cache'), // Подключаем библиотеку кеширования
autoprefixer = require('gulp-autoprefixer'), // Подключаем библиотеку для автоматического добавления префиксов
source = 'app/', //Основная директория
dest = 'dist/'; // Директория выгрузки
/*BOOTSTRAP*/
// Bootstrap scss source
var bootstrapSass = {
in: './node_modules/bootstrap-sass/'
};
// Bootstrap fonts source
var bootstrapFonts = {
in: [source + 'fonts/*.*', bootstrapSass.in + 'assets/fonts/**/*'],
out: dest + 'fonts/'
};
// Our scss source folder: .scss files
var scss = {
in: source + 'sass/main.sass',
out: dest + 'css/',
watch: source + 'sass/**/*',
sassOpts: {
outputStyle: 'nested',
precison: 3,
errLogToConsole: true,
includePaths: [bootstrapSass.in + 'assets/stylesheets']
}
};
// copy bootstrap required fonts to dest
gulp.task('bootstrapFonts', function () {
return gulp
.src(bootstrapFonts.in)
.pipe(gulp.dest(bootstrapFonts.out));
});
gulp.task('bootstrapSass', ['bootstrapFonts'], function () {
return gulp.src(scss.in)
.pipe(sass(scss.sassOpts))
.pipe(gulp.dest(scss.out));
});
/*END BOOTSTRAP*/
gulp.task('sass', function(){ // Создаем таск Sass
return gulp.src('app/sass/**/*.sass') // Берем источник
.pipe(sass()) // Преобразуем Sass в CSS посредством gulp-sass
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true })) // Создаем префиксы
.pipe(gulp.dest('app/css')) // Выгружаем результата в папку app/css
.pipe(browserSync.reload({stream: true})); // Обновляем CSS на странице при изменении
return gulp.src(scss.in)
.pipe(sass(scss.sassOpts))
.pipe(gulp.dest(scss.out));
});
gulp.task('browser-sync', function() { // Создаем таск browser-sync
browserSync({ // Выполняем browserSync
server: { // Определяем параметры сервера
baseDir: 'app' // Директория для сервера - app
},
notify: false // Отключаем уведомления
});
});
gulp.task('scripts', function() {
return gulp.src([ // Берем все необходимые библиотеки
'app/libs/jquery/dist/jquery.min.js', // Берем jQuery
'app/libs/magnific-popup/dist/jquery.magnific-popup.min.js' // Берем Magnific Popup
])
.pipe(concat('libs.min.js')) // Собираем их в кучу в новом файле libs.min.js
.pipe(uglify()) // Сжимаем JS файл
.pipe(gulp.dest('app/js')); // Выгружаем в папку app/js
});
gulp.task('css-libs', ['sass'], function() {
return gulp.src('app/css/libs.css') // Выбираем файл для минификации
.pipe(cssnano()) // Сжимаем
.pipe(rename({suffix: '.min'})) // Добавляем суффикс .min
.pipe(gulp.dest('app/css')); // Выгружаем в папку app/css
});
gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() {
gulp.watch('app/sass/**/*.sass', ['sass']); // Наблюдение за sass файлами в папке sass
gulp.watch('app/*.html', browserSync.reload); // Наблюдение за HTML файлами в корне проекта
gulp.watch('app/js/**/*.js', browserSync.reload); // Наблюдение за JS файлами в папке js
});
gulp.task('clean', function() {
return del.sync('dist'); // Удаляем папку dist перед сборкой
});
gulp.task('img', function() {
return gulp.src('app/img/**/*') // Берем все изображения из app
.pipe(cache(imagemin({ // Сжимаем их с наилучшими настройками с учетом кеширования
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
})))
.pipe(gulp.dest('dist/img')); // Выгружаем на продакшен
});
gulp.task('build', ['clean', 'bootstrapSass', 'img', 'sass', 'scripts'], function() {
var buildCss = gulp.src([ // Переносим библиотеки в продакшен
'app/css/main.css',
'app/css/libs.min.css'
])
.pipe(gulp.dest('dist/css'))
var buildFonts = gulp.src(['app/fonts/**/*']) // Переносим шрифты в продакшен
.pipe(gulp.dest('dist/fonts'))
var buildJs = gulp.src('app/js/**/*') // Переносим скрипты в продакшен
.pipe(gulp.dest('dist/js'))
var buildHtml = gulp.src('app/*.html') // Переносим HTML в продакшен
.pipe(gulp.dest('dist'));
});
gulp.task('clear', function (callback) {
return cache.clearAll();
})
gulp.task('default', ['watch']);
Answer the question
In order to leave comments, you need to log in
What's the point of asking the same questions over and over again?
There is no bootstrap, there is an import, but there is no file.
sorry for duplicating, but I can’t find the answer for several months already)
I have something similar ... I’m looking for an answer to a question just on this topic and besides the lesson, help plz !!!!, I use stylus (.styl). ..the problem is that when using the functions (gulp-concat and gulp-uglify) the libs.styl file with (@import "app/libs/magnific-popup/dist/magnific-popup.css" ) is created in the libs file. css file with the same line, instead of displaying the contents of the magnific-popup.css file,
which I'm doing wrong., I asked the same question in the topic for the lesson ("Gulp for the smallest - a detailed guide"), but unfortunately no one yet did not answer
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question