I started a new website theme using Google’s Web Starter Kit. Previously, I worked with Grunt. Since this kit comes with Gulp, I decided to give it a try.<\/p>\n
The issue I’m having is with livereload and imported scss files. The kit includes a setup with a components.scss file and several imported partials (e.g. The gulp file is as follows:<\/p>\n I started a new website theme using Google’s Web Starter Kit. Previously, I worked with Grunt. Since this kit comes with Gulp, I decided to give it a try. The issue I’m having is with livereload and imported scss files. The kit includes a setup with a components.scss file and several imported partials (e.g. @import […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7615","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7615"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7615\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}@import \"_pages\/_styleguide\";<\/code> This imports the partial just fine, but any changes to _pages\/_styleguide.scss are not refresh unless I restart the gulp task; however, any change to an scss file that is not imported (but instead included in the gulp task) is recompiled and refreshed with livereload.<\/p>\n\/\/ Include Gulp & Tools We'll Use\n\nvar gulp = require('gulp');\n\nvar $ = require('gulp-load-plugins')();\n\nvar del = require('del');\n\nvar runSequence = require('run-sequence');\n\nvar browserSync = require('browser-sync');\n\nvar pagespeed = require('psi');\n\nvar reload = browserSync.reload;\n\n\n\nvar AUTOPREFIXER_BROWSERS = [\n\n 'ie >= 10',\n\n 'ie_mob >= 10',\n\n 'ff >= 30',\n\n 'chrome >= 34',\n\n 'safari >= 7',\n\n 'opera >= 23',\n\n 'ios >= 7',\n\n 'android >= 4.4',\n\n 'bb >= 10'\n\n];\n\n\n\n\/\/ Lint JavaScript\n\ngulp.task('jshint', function () {\n\n return gulp.src('app\/scripts\/**\/*.js')\n\n .pipe(reload({stream: true, once: true}))\n\n .pipe($.jshint())\n\n .pipe($.jshint.reporter('jshint-stylish'))\n\n .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));\n\n});\n\n\n\n\/\/ Optimize Images\n\ngulp.task('images', function () {\n\n return gulp.src('app\/images\/**\/*')\n\n .pipe($.cache($.imagemin({\n\n progressive: true,\n\n interlaced: true\n\n })))\n\n .pipe(gulp.dest('dist\/images'))\n\n .pipe($.size({title: 'images'}));\n\n});\n\n\n\n\/\/ Copy All Files At The Root Level (app)\n\ngulp.task('copy', function () {\n\n return gulp.src([\n\n 'app\/*',\n\n '!app\/*.html',\n\n 'node_modules\/apache-server-configs\/dist\/.htaccess'\n\n ], {\n\n dot: true\n\n }).pipe(gulp.dest('dist'))\n\n .pipe($.size({title: 'copy'}));\n\n});\n\n\n\n\/\/ Copy Web Fonts To Dist\n\ngulp.task('fonts', function () {\n\n return gulp.src(['app\/fonts\/**'])\n\n .pipe(gulp.dest('dist\/fonts'))\n\n .pipe($.size({title: 'fonts'}));\n\n});\n\n\n\n\/\/ Compile and Automatically Prefix Stylesheets\n\ngulp.task('styles', function () {\n\n \/\/ For best performance, don't add Sass partials to `gulp.src`\n\n return gulp.src([\n\n 'app\/styles\/*.scss',\n\n 'app\/styles\/**\/*.css',\n\n 'app\/styles\/components\/components.scss'\n\n ])\n\n .pipe($.changed('.tmp\/styles', {extension: '.css'}))\n\n .pipe($.if('*.scss', $.rubySass({\n\n style: 'expanded',\n\n precision: 10\n\n })\n\n .on('error', console.error.bind(console))\n\n ))\n\n .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))\n\n .pipe(gulp.dest('.tmp\/styles'))\n\n .pipe($.size({title: 'styles'}));\n\n});\n\n\n\n\/\/ Scan Your HTML For Assets & Optimize Them\n\ngulp.task('html', function () {\n\n var assets = $.useref.assets({searchPath: '{.tmp,app}'});\n\n\n\n return gulp.src('app\/**\/*.html')\n\n .pipe(assets)\n\n \/\/ Concatenate And Minify JavaScript\n\n .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))\n\n \/\/ Remove Any Unused CSS\n\n \/\/ Note: If not using the Style Guide, you can delete it from\n\n \/\/ the next line to only include styles your project uses.\n\n .pipe($.if('*.css', $.uncss({\n\n html: [\n\n 'app\/index.html',\n\n 'app\/styleguide\/index.html'\n\n ],\n\n \/\/ CSS Selectors for UnCSS to ignore\n\n ignore: [\n\n \/.navdrawer-container.open\/,\n\n \/.app-bar.open\/\n\n ]\n\n })))\n\n \/\/ Concatenate And Minify Styles\n\n .pipe($.if('*.css', $.csso()))\n\n .pipe(assets.restore())\n\n .pipe($.useref())\n\n \/\/ Update Production Style Guide Paths\n\n .pipe($.replace('components\/components.css', 'components\/main.min.css'))\n\n \/\/ Minify Any HTML\n\n .pipe($.if('*.html', $.minifyHtml()))\n\n \/\/ Output Files\n\n .pipe(gulp.dest('dist'))\n\n .pipe($.size({title: 'html'}));\n\n});\n\n\n\n\/\/ Clean Output Directory\n\ngulp.task('clean', del.bind(null, ['.tmp', 'dist']));\n\n\n\n\/\/ Watch Files For Changes & Reload\n\ngulp.task('serve', ['styles'], function () {\n\n browserSync({\n\n notify: false,\n\n \/\/ Run as an https by uncommenting 'https: true'\n\n \/\/ Note: this uses an unsigned certificate which on first access\n\n \/\/ will present a certificate warning in the browser.\n\n \/\/ https: true,\n\n server: {\n\n baseDir: ['.tmp', 'app']\n\n }\n\n });\n\n\n\n gulp.watch(['app\/**\/*.html'], reload);\n\n gulp.watch(['app\/styles\/**\/*.{scss,css}'], ['styles', reload]);\n\n gulp.watch(['app\/scripts\/**\/*.js'], ['jshint']);\n\n gulp.watch(['app\/images\/**\/*'], reload);\n\n});\n\n\n\n\/\/ Build and serve the output from the dist build\n\ngulp.task('serve:dist', ['default'], function () {\n\n browserSync({\n\n notify: false,\n\n \/\/ Run as an https by uncommenting 'https: true'\n\n \/\/ Note: this uses an unsigned certificate which on first access\n\n \/\/ will present a certificate warning in the browser.\n\n \/\/ https: true,\n\n server: {\n\n baseDir: 'dist'\n\n }\n\n\n\n });\n\n});\n\n\n\n\/\/ Build Production Files, the Default Task\n\ngulp.task('default', ['clean'], function (cb) {\n\n runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy'], cb);\n\n});\n\n\n\n\/\/ Run PageSpeed Insights\n\n\/\/ Update `url` below to the public URL for your site\n\ngulp.task('pagespeed', pagespeed.bind(null, {\n\n \/\/ By default, we use the PageSpeed Insights\n\n \/\/ free (no API key) tier. You can use a Google\n\n \/\/ Developer API key if you have one. See\n\n \/\/ http:\/\/goo.gl\/RkN0vE for info key: 'YOUR_API_KEY'\n\n url: 'https:\/\/example.com',\n\n strategy: 'mobile'\n\n}));\n\n\n\n\/\/ Load custom tasks from the `tasks` directory\n\ntry { require('require-dir')('tasks'); } catch (err) {}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"