Не компилирует sass в css используя gulp почему?

Question

[ernst94]

Добрый день.
Может быть кто-то сталкивался с такой проблемой и может помочь в решении.
Gulp запускается, все бы все работает отлично, при сохранении изменений в html-файле - все отлично: страница перезагружается и выводит достоверную инфу, но когда сохраняешь sass, не происходит на сайте никаких изменений. Помогите пожалуйста

var gulp         = require('gulp'),
		sass         = require('gulp-sass'),
		autoprefixer = require('gulp-autoprefixer'),
		cleanCSS    = require('gulp-clean-css'),
		rename       = require('gulp-rename'),
		browserSync  = require('browser-sync').create(),
		concat       = require('gulp-concat'),
		uglify       = require('gulp-uglify');

gulp.task('browser-sync', ['styles', 'scripts'], function() {
		browserSync.init({
				server: {
						baseDir: "./app"
				},
				notify: false
		});
});

gulp.task('styles', function () {
	return gulp.src('sass/*.sass')
		// output non-minified CSS file
		.pipe(sass({
		includePaths: require('node-bourbon').includePaths
		}).on('error', sass.logError))
		.pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
		.pipe(gulp.dest('app/css'))
		// output the minified version
		.pipe(cleanCSS())
		.pipe(rename({suffix: '.min', prefix : ''}))
		.pipe(gulp.dest('app/css'))
		.pipe(browserSync.stream());
});


gulp.task('scripts', function() {
	return gulp.src([
		'./app/libs/modernizr/modernizr.js',
		'./app/libs/jquery/jquery-1.11.2.min.js',
		'./app/libs/waypoints/waypoints.min.js',
		'./app/libs/animate/animate-css.js',
		'./app/libs/Magnific-Popup/jquery.magnific-popup.min.js',
		'./app/libs/animateNumber/jquery.animateNumber.min.js',
		'./app/libs/EqualHeights/equalheights.min.js',
		'./app/libs/owl-carousel/owl.carousel.min.js',
		'./app/libs/selectize/dist/js/standalone/selectize.min.js'
		])
		.pipe(concat('libs.js'))
		.pipe(uglify()) //Minify libs.js
		.pipe(gulp.dest('./app/js/'));
});

gulp.task('watch', function () {
	gulp.watch('sass/*.sass', ['styles']);
	gulp.watch('app/libs/**/*.js', ['scripts']);
	gulp.watch('app/js/*.js').on("change", browserSync.reload);
	gulp.watch('app/*.html').on('change', browserSync.reload);
});

gulp.task('default', ['browser-sync', 'watch']);

Comments

[ernst94]

Вот исходник

Answer 1

[alvvi]

В ваших исходных файлах есть следующая функция, генерирующая тэги link :

<script>
		function loadCSS(hf) {
			var ms=document.createElement("link");ms.rel="stylesheet";
			ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
		}
		loadCSS("header.min.css"); //Header Styles (compress & paste to header after release)
		loadCSS("main.min.css");   //User Styles + Media Queries
	</script>

Исходя из нее аттрибут href ссылается на файлы лежащие напрямую в директории app/
Однако, gulp помещает ваши файлы в app/css, что видно из таска Styles :
.pipe(gulp.dest('app/css'))

Решение : изменить аргументы функции на корректные

loadCSS("css/header.min.css"); 
loadCSS("css/main.min.css");

либо поменять пути в таске :

.pipe(gulp.dest('app/'))

Answer 2

[ernst94]

У меня просто не компилируется, уже все перепробовал помогите пожалуйста вот в index.html пути вот такие

<!-- Load Main CSS Compilled without JS -->
	<noscript>
		<link rel="stylesheet" href="main.min.css">
	</noscript>

<script>
		function loadCSS(hf) {
			var ms=document.createElement("link");ms.rel="stylesheet";
			ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
		}
		loadCSS("header.min.css"); //Header Styles (compress & paste to header after release)
		loadCSS("main.min.css");   //User Styles + Media Queries
	</script>

	<!-- Load Scripts -->
	<script>var scr = {"scripts":[
		{"src" : "js/libs.js", "async" : false},
		{"src" : "js/common.js", "async" : false}
		]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild(c)}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
	</script>

А если я пути вот так пропишу

<!-- Load CSS -->
	<script>
		function loadCSS(hf) {
			var ms=document.createElement("link");ms.rel="stylesheet";
			ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
		}
		loadCSS("css/header.min.css"); //Header Styles (compress & paste to header after release)
		loadCSS("css/main.min.css");   //User Styles + Media Queries
	</script>

То он будет компилировать но пути станут вот такие


Помогите пожалуйста, я наверно что то не так делаю где то

Comments

[alvvi]

Пути стали "вот такими" из-за того что теперь все ссылки на шрифты и прочее необходимо менять в соответствии с новым расположением файла. Если вам этим заниматься не хочется, то можно воспользоваться вторым решением, которое я предложил в своем ответе.

[ernst94]

Илья Ростопка: Сделал как вы сказали, но все ровно шрифты не подключились, и если в header.sass прописать путь к фото то он не добавляет тоже, помогите пожалуйста или сможете прописать все правильно в исходнике потом прислать, очень прошу, уже 2 день мучаюсь

[alvvi]

ernst94: странно, у меня все работает отлично, вот, если у вас все хорошо, отметьте пожалуйста мой ответ, как решение. Если нет, то проинспектируйте страницу в хроме/мозиле, посмотрите куда ссылаются линки, во вкладке source можно так же увидеть сами эти файлы. В любом случае, удачи.

[ernst94]

Илья Ростопка: Так же не хочет вообще (( Я сейчас скачал новый шаблон чистый и попробовал что либо сделать и он даже с новым не хочет тоже. Попробуйте пожалуйста посмотреть он у вас заработает сразу ? dropmefiles.com/gO5dY

[ernst94]

Даже не знаю в чем проблема уже

[alvvi]

ernst94: а вы точно установили сам gulp и все его dependencies посредством консоли?

[ernst94]

Да, все запускаю через gulp, такого не было раньше у меня, как обновил окружения gulp и все, после этого sass перестал компилировать

[ernst94]

Когда изменяю в sass что либо в консоли вот что пишет, вроде бы нету ошибок ? clip2net.com/s/3IedCmT но не компилирует все ровно

[ernst94]

Илья Ростопка: Урааа наконец то решил проблему, полностью удалил Gulp и все что с ним связано и установил все заново

Answer 3

[Евгений]

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

У меня примерно такие настройки. return похоже лишний

Comments

[ernst94]

Не помогло =( Можете скачать мой исходник посмотреть пожалуйста ?

[Евгений]

ernst94: https://habrahabr.ru/post/250569/ я по этой статье свою сборку делал

Answer 4

[Егор Живагин]

У вас что не работает-то? Может просто браузер не перезагружается? (перезагрузи без кэша вручную, проверь изменения). Или именно не копилируется?
Если не перезагружается:

gulp.watch('app/css/*.css').on("change", browserSync.reload);

в таск watch

Если не компилируется/не собирается, проверяйте пути. Сейчас, если у вас больше одного sass-файла, то будет и несколько css. Соответственно, каждый из файлов должен быть в link у вашей странички