Как вставить стили на страницу запущенную с вотчером и лайф релоадом?

Question

[Nikolay S.]

Что то вроде:

<script type="text/javascript">

// Кажется в gulpfile.js не будет виден document
...
const watch = require('gulp-watch');
const browserSync = require("browser-sync");
const reload = browserSync.reload;

gulp.prototype.appendToPage = function(CompiledStyle) {
    if( this.isAppended() )return;

    let styleTag = document.createElement('style');
        styleTag.innerHTML = CompiledStyle;

    document.getElementByID('HEAD').appendChild( styleTag );
};

gulp.task('build::style', function () {
    return combiner(
        gulp.src(path.src.style)
            // ,sourcemaps.init()
            // ,sass().on('error', sass.logError)
            // ,prefixer()
            // ,cssmin()
            // ,sourcemaps.write()
        //,gulp.dest(path.build.code)
        ,gulp.appendToPage(this) // <== append to page instead move to destination
            ,reload({stream: true})
    );
});
...
</script>

Я понимаю что проще всего скомпилировать, сохранить, добавить:

<link
    rel="stylesheet"
    href="assets/css/modules/livereload.css"
>

но возможно ли это?

upd:
У меня есть задача: Сверстать сайт на готовой CMS. Cms сама компилирует файлы стилей и подключает их. Вот я и подумал гальпом делать тоже самое и переопределять стили подключением их в футере (Openserver + browserSync(Proxy) ). Каждый раз обновлять страницу не прикольно (хотя бы из за дополнения perfectPixel который каждый раз выключается). Можно конечно в игнор файл добавить footer.htm чтобы случайно не закомитить\запушить на проект левое подключение. По этому и встал такой интерес :)

Answer 1

[Арсений Матыцин]

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

У меня подобное реализовано на gulp-connect и gulp-livereload

gulp.task('connect', function() {
	connect.server({
		livereload: true
	});
});

+ маркеры обновления в других задачах

И весь проект тащится в livereaload режим. Отключил только почти сразу, как собрал. Так как в проектах чисто на галпе собираю проекты, которые нужно обновлять целиком.

Comments

[Nikolay S.]

Дополнил вопрос. К тому же лайфрелод желателен чтобы подгонять данные по perfectPixel через миксин который считает что либо. Конечно пальцы не отвалятся, нервы кончаться :)

[Nikolay S.]

Согласен, намудрил, потому что тогда еще не знал как это работает :)

Answer 2

[Nikolay S.]

Все куда проще чем кажется

return src(srcPath, { allowEmpty: true })
        // .pipe(plumber())
        // .pipe(gulpif(needNewer, newer({dest: buildPath, ext: production ? '.min.css' : '.css'})))
        // .pipe(gulpif(!production, sourcemaps.init()))
        .pipe(sass())
        // .pipe(groupmediaqueries())
        // .pipe(gulpif(production, autoprefixer({ browsers: ["last 12 versions", "> 1%", "ie 8", "ie 7"] })))
        .pipe(gulpif(!production, browsersync.stream()))
        // .pipe(gulpif(production, mincss(...)))
        // .pipe(gulpif(production, rename({ suffix: ".min" })))
        // .pipe(plumber.stop())
        // .pipe(gulpif(!production, sourcemaps.write("./assets/maps/")))
        .pipe(dest(buildPath))
        // .pipe(debug({ "title": "CSS files" }))
        .on("end", () => production || '' == domain ? browsersync.reload : null);