gitarizd
@gitarizd
Верстальщик

Gulp.js — file to import not found or unreadable. В чем проблема?

изменения в html и js проходят как надо
на редактирование scss реагирует сабжем, причем иногда после второй-третьей правки-сохранения
windows 7, sublime text3

gulpfile.js:
'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    prefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    //sourcemaps = require('gulp-sourcemaps'), //?
    rigger = require('gulp-rigger'), //плагиy для импорта файлов
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    //pngquant = require('imagemin-pngquant'), //для работы с пнг
    rimraf = require('rimraf'), // для удаления файлов
    browserSync = require("browser-sync"),
    reload = browserSync.reload;

var config = {
    server: {
        baseDir: "./build"
    },
    tunnel: true,
    host: 'localhost',
    port: 9000,
    logPrefix: "Frontend_Devil"
};

var path = {
    build: { //Тут мы укажем куда складывать готовые после сборки файлы
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/'
    },
    src: { //Пути откуда брать исходники
        html: 'src/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
        js: 'src/js/main.js',//В стилях и скриптах нам понадобятся только main файлы
        style: 'src/style/main.scss',
        img: 'src/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
        fonts: 'src/fonts/**/*.*'
    },
    watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
        html: 'src/**/*.html',
        js: 'src/js/**/*.js',
        style: 'src/style/**/*.scss',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};

gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(rigger()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html)) //Выплюнем их в папку build
        .pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений
});

gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
        .pipe(rigger()) //Прогоним через rigger
        //.pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()) //Сожмем наш js
        //.pipe(sourcemaps.write()) //Пропишем карты
        .pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
        //.pipe(sourcemaps.init()) //То же самое что и с js
        .pipe(sass()) //Скомпилируем
        .pipe(prefixer()) //Добавим вендорные префиксы
        .pipe(cssmin()) //Сожмем
        //.pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(reload({stream: true}));
});

gulp.task('image:build', function () {
    gulp.src(path.src.img) //Выберем наши картинки
        .pipe(imagemin({ //Сожмем их
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            //use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img)) //И бросим в build
        .pipe(reload({stream: true}));
});

gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});

gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build'
]);

gulp.task('webserver', function () {
    browserSync(config);
});

gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});

gulp.task('default', ['build', 'webserver', 'watch']);


src/style/main.scss
/*
* Third Party
*/
/*
* Custom
*/
@import "partials/app";


src/style/partials/app.scss
body {
	margin: 20px;  
}
  • Вопрос задан
  • 3251 просмотр
Решения вопроса 1
Evanre
@Evanre
Front-end developer
Gulp засекает изменение начинает парсить файл раньше чем он успевает сохраниться. У меня подобное встречалось как в Gulp, так и в обычной командной строке c sass --watch. В моем случае вылечилось переносом проекта с hdd на ssd. Если у Вас нет ssd, либо копайте в сторону задержки срабатывания watcher'a либо создавайте локальный раздел на оперативке (при условии конечно что ее достаточно).
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@JohnyM
Еще пара вариантов решения проблемы.

Вариант 1.
Просто указываете в параметре includePaths путь к папке partials. Хотя мне не помогло.
.pipe(sass({ includePaths : ['./src/assets/styles/partials/'] }))

-------------------------------------------------------
Вариант 2.
Используйте gulp-ruby-sass вместо gulp-sass. (правда ruby-sass на порядок медленнее компилирует. сравнение компиляторов)
-------------------------------------------------------

И вариант 3 (конкретно под sublime 3).
В настройках редактора есть параметр atomic_save, отвечающий за способ сохранения файла (по умолчанию false).

Если установить "atomic_save: true", то каждый раз при сохранении файла, sublime будет создавать копию редактируемого файла, вносить все изменения в нее, а затем заменять старый файл этой копией.

Этот способ, наверное, не самый правильный, но можт вам по душе будет именно такое решение (и ошибки нет, и ruby-sass не надо юзать, и ssd покупать).

Прописывать в пользовательских настройках sublime'a.
{
  atomic_save: true
}
Ответ написан
@LMI
Понимаю, что вопрос уже устарел, но вдруг кому поможет.

У меня была такая же проблема на Windows 7, где стоял HDD. Буквально на днях я перешел на Mac OS, где стоит и SDD и эта проблема сама по себе исчезла. Так что действительно у кого такая трабла, то либо ставьте задержку на gulp watcher или покупайте SSD.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽