- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在尝试构建一个 gulpfile,它将监视 jekyll/sass/js 并与浏览器同步。该脚本正确地监视了 jekyll 的变化,重建并注入(inject)了浏览器中的所有变化。
但我不明白为什么它不同步 sass/js 更改,即使它们已被监视和重新生成。任何帮助将不胜感激!
/*** gulp.js ***/
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var header = require('gulp-header');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var cp = require('child_process');
var package = require('./package.json');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
var banner = [
'/*!\n' +
' * <%= package.name %>\n' +
' * <%= package.title %>\n' +
' * <%= package.url %>\n' +
' * @author <%= package.author %>\n' +
' * @version <%= package.version %>\n' +
' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' +
' */',
'\n'
].join('');
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['css', 'js', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: 'html'
}
});
});
gulp.task('css', ['bs-reload'], function () {
return gulp.src('themes/dental-theme/assets/scss/main.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('build/css'))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(header(banner, { package : package }))
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('js',function(){
gulp.src('themes/dental-theme/assets/js/main.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(header(banner, { package : package }))
.pipe(gulp.dest('build/js'))
.pipe(uglify())
.pipe(header(banner, { package : package }))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('build/js'))
.pipe(browserSync.reload({stream:true, once: true}));
});
gulp.task('browser-sync', function() {
browserSync.init(null, {
server: {
baseDir: "html"
}
});
});
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', ['css', 'js', 'browser-sync'], function () {
gulp.watch("themes/dental-theme/assets/scss/*.scss", ['css']);
gulp.watch("themes/dental-theme/assets/js/*.js", ['js']);
gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});
最佳答案
您的 js 和 css watch 只是重新生成文件,而不是进行 Jekyll 构建,而您的 html watch 会。
尝试:
gulp.task('default', ['css', 'js', 'browser-sync'], function () {
gulp.watch("assets/scss/*/*.scss", ['css', 'jekyll-rebuild']);
gulp.watch("assets/js/*.js", ['js', 'jekyll-rebuild']);
gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});
编辑:
如果你不想每次都构建你的 Jekyll,你可以将生成的 Assets 复制到目标文件夹:
gulp.task('default', ['css', 'js', 'browser-sync'], function () {
gulp.watch("assets/scss/*/*.scss", ['css', 'css-to-site']);
gulp.watch("assets/js/*.js", ['js', 'js-to-site']);
gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});
gulp.task('js-to-site', function () {
gulp.src('build/js/*')
.pipe(gulp.dest('html/themes/dental-theme/js'));
browserSync.reload();
});
gulp.task('css-to-site', function () {
gulp.src('build/css/*')
.pipe(gulp.dest('html/themes/dental-theme/css'));
browserSync.reload();
});
未测试。
关于javascript - gulp watch 并重新加载 jekyll、sass、js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25737714/
我实际上正在尝试构建一个 gulp 计划来做网络相关的事情,比如编译 sass、缩小 css、丑化 javascript 等等。但我真的在使用 sass 时遇到了麻烦。 这是我的代码示例: gulp.
为了简化样式的描述,浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单,但在很多方面都不太方便,比如不支持嵌套,代码比较冗余;不支持继承和混合,代码不好复用等。 为了给 c
如何编译sass模块(新版sass)? https://css-tricks.com/introducing-sass-modules/ 我尝试了 sass-migrator 终端,但它没有编译 ht
在 SASS 中,当出现错误时,它会在浏览器的页面顶部显示一条消息。它的一个样本在附图中。 该文本不可选择。它不是图像。它不会出现在“查看源代码”中。它在 Firebug 中不可见。 错误文本是如何呈
我想决定何时编译.sass文件。换句话说,我不想看文件,而是手动编译。 我该怎么做? 最佳答案 它比我想象的要简单: sass style.scss style.css 关于sass - 我如何在不观
我希望有一个像 +stacktextshadow(blue, red, green) 这样的 mixin吐了text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3p
我想在我们公司的 Web 应用程序上使用 SASS,但我无法在生产机器上安装任何程序。我搜索的有关 SASS 的所有内容都需要您运行 gem 之类的安装程序,并且还需要 HAML。 我希望找到一个脚本
From the docs我看到您可以更改 SASS 的缓存位置。 但是,我不确定要使用的确切语法。我有一个 Zurb 基金会项目,随之而来的是一个 config.rb文件。我认为这是需要更新以更改缓
也许更好的问题是,有没有更有效的方法来覆盖 mixin 的一部分? 这段SCSS: @mixin button { .button { background-color: red;
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置; // vue.config.js module.exports = { css: {
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置; // vue.config.js module.exports = { css: {
重复问题? 是的。但与this有点不同 概述: 我也是括号文本编辑器的新用户。我知道 Scss 和 Sass 之间的区别。但是我使用方括号文本编辑器的原因只是为了 Sass 而不是 Scss。 看了J
我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px
我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 v3。我删除了 node-sass现在我的 package.json 中有这些版本: "g
我正在使用 vanilla Sass(没有 Compass/SUZY/Bourbon/etc.),但我无法确定将 *.rb 文件放在哪里。我不是 Ruby 程序员,但我确实找到了一个其他人编写的函数,
我刚开始使用gulp-sass ,是否有一种“简单”的方法来找出正在使用的 Sass 版本? 并不是说我认为这太重要了,但我正在使用 gulp-sass在 Visual Studio 2015 (CT
我正在为 sass 实现 grunt 插件到 css 处理,但有 2 个选项可用 grunt-contrib-sass 和 grunt-sass。 我在互联网上搜索但找不到任何相关答案 grunt-c
我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken()),据我所知,最新版本的 LibSass 允许这样做。 我已安装 node-sas
我是一名优秀的程序员,十分优秀!