What I do?
Run gulp (SCSS files are being processed, I get a CSS file)
I change any SCSS file again
Expected:
CSS file from 1. is updated with the changes from 2.
What happens?
CSS file from 1. isn't changed
Command line output:
$ gulp
[09:24:28] Using gulpfile c:\Users\User\_dev\github\project\gulpfile.js
[09:24:28] Starting 'sass'...
[09:24:28] Finished 'sass' after 98 ms
[09:24:28] Starting 'default'...
[09:24:28] Finished 'default' after 7.31 μs
[09:24:35] sass-watch saw _base.scss was changed
[09:25:39] sass-watch saw _base.scss was changed
gulpfile.js:
gulp.task('sass', function() {
watch({ glob: 'css/**/*.{scss,sass}', name: 'sass-watch'})
.pipe(plumber())
.pipe(sass())
.pipe(gulp.dest('css'))
});
gulp.task('default', ['sass']);
Notes:
Issue on GitHub (gulp)
Issue on GitHub (gulp-watch)
gulpfile.js on GitHub Gist)
OS: Win7
node: 0.10.29
npm: 1.4.14
The way the source files are piped in is not important. The result stays the same when using gulp.src()
I dont think your sass task is correctly written.
Try something like this:
var gulp = require('gulp');
var sass = require('gulp-sass')
gulp.task('sass', function () {
gulp.src('PATH-TO-SASS-FILES/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Related
I did everything exactly as stated in docs:
https://github.com/sindresorhus/gulp-ruby-sass/blob/master/readme.md
This is my code in gulpfile.js:
// Sass configuration
const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', () =>
sass('kraater-web/src/app/css/admin/vars.scss', {sourcemap: true})
.on('error', sass.logError)
// for inline sourcemaps
.pipe(sourcemaps.write())
// for file sourcemaps
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: 'source'
}))
.pipe(gulp.dest('kraater-web/src/app/css/'))
);
gulp.task('default', ['sass'], function() {
})
When I run it, I just get this output, and no files are generated:
[15:47:25] Using gulpfile C:\wamp\www\site17\gulpfile.js
[15:47:25] Starting 'sass'...
[15:47:25] Could not find an option named "sourcemap".
[15:47:25] Usage: sass <input.scss> [output.css]
sass <input.scss>:<output.css> <input/>:<output/>
=== Input and Output ===================
--[no-]stdin Read the stylesheet from stdin.
--[no-]indented Use the indented syntax for input from stdin.
-I, --load-path=<PATH> A path to use when resolving imports.
May be passed multiple times.
-s, --style=<NAME> Output style.
[expanded (default), compressed]
--update Only compile out-of-date stylesheets.
=== Source Maps ========================
--[no-]source-map Whether to generate source maps.
(defaults to on)
--source-map-urls How to link from source maps to source files.
[relative (default), absolute]
--[no-]embed-sources Embed source file contents in source maps.
--[no-]embed-source-map Embed source map contents in CSS.
=== Other ==============================
-i, --interactive Run an interactive SassScript shell.
-c, --[no-]color Whether to emit terminal colors.
-q, --[no-]quiet Don't print warnings.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.
[15:47:25] Finished 'sass' after 416 ms
[15:47:25] Starting 'default'...
[15:47:25] Finished 'default' after 11 μs
Watching build tasks has finished.
Ideas how to get it to work?
I am trying to get browserSync to work with a watch task for a Polymer app. Here is my gulp file:
function source() {
return project.splitSource()
.pipe(gulpif('**/*.html', html.lint())).on('end', log('Linted HTML'))
.pipe(gulpif('**/*.html', html.minify())).on('end', log('Minified HTML'))
.pipe(gulpif('**/*.js', javascript.minify())).on('end', log('Minified Javascript'))
.pipe(gulpif('**/*.js', javascript.babelify())).on('end', log('Transpiled Javascript'))
.pipe(gulpif('**/*.{gif,jpg,svg}', images.minify())).on('end', log('Minified Images'))
.pipe(project.rejoin()); // Call rejoin when you're finished
}
function dependencies() {
return project.splitDependencies()
.pipe(project.rejoin());
}
gulp.task('default', gulp.series([
clean.build,
project.merge(source, dependencies),
project.serviceWorker
]));
gulp.task('reload', function(){
browserSync.reload();
} );
gulp.task('dev', gulp.series(
project.merge(source, dependencies)
));
gulp.task('browser-sync', function(){
return new Promise(function(resolve){
resolve( browserSync({
port: 5000,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
server: {
baseDir: ['./'],
}
})
)
});
})
gulp.task('watch', function(){
gulp.watch(['**/*.html'], gulp.series('dev','reload'));
gulp.watch(['**/*.js'], gulp.series('dev', 'reload'));
});
gulp.task('serve',
gulp.series(
'dev',
gulp.parallel('browser-sync','watch')), function(){
return gulp.src('**/*.html', {passthrough:true})
}
);
The project.splitSource is a polymer starter kit specific function that splits web components into seperate html , css, js entities so you can perform whatever tasks you need on them.
When I run 'gulp serve' , the tasks complete and my app is served.
As soon as I change the contents of a file, the watch runs the 'dev' task and attempts to run the reload task, and thats where it crashes. Here is the command line messages for this entire process :
→ gulp serve
[08:53:43] Using gulpfile ~/Documents/Projects/unicef/etools-dashboard/gulpfile.js
[08:53:43] Starting 'serve'...
[08:53:43] Starting 'dev'...
[08:53:43] Starting 'output'...
[08:55:20] Linted HTML
[08:55:20] Minified HTML
[08:55:20] Minified CSS
[08:55:20] Minified Javascript
[08:55:20] Transpiled Javascript
[08:55:20] gulp-imagemin: Minified 511 images (saved 212 kB - 3.1%)
[08:55:20] Minified Images
[08:55:29] Finished 'output' after 1.75 min
[08:55:29] Finished 'dev' after 1.75 min
[08:55:29] Starting 'browser-sync'...
[08:55:29] Starting 'watch'...
[08:55:30] Finished 'browser-sync' after 551 ms
[PSK] Access URLs:
--------------------------------------
Local: http://localhost:5000
External: http://192.168.0.102:5000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.0.102:3001
--------------------------------------
[PSK] Serving files from: ./
[08:56:20] Starting 'dev'...
[08:56:20] Starting 'output'...
[08:56:20] Finished 'output' after 288 ms
[08:56:20] Finished 'dev' after 290 ms
[08:56:20] Starting 'reload'...
[PSK] Reloading Browsers...
Error: write after end
at writeAfterEnd (_stream_writable.js:159:12)
at StreamAnalyzer.Writable.write (_stream_writable.js:204:5)
at PassThrough.ondata (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:546:20)
at emitOne (events.js:77:13)
at PassThrough.emit (events.js:169:7)
at readableAddChunk (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:217:18)
at PassThrough.Readable.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_readable.js:176:10)
at PassThrough.Transform.push (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:123:32)
at afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:79:51)
at TransformState.afterTransform (/Users/Marko1/Documents/Projects/unicef/etools-dashboard/node_modules/merge-stream/node_modules/readable-stream/lib/_stream_transform.js:58:12)
[08:56:21] The following tasks did not complete: serve, <parallel>, watch, <series>, reload
[08:56:21] Did you forget to signal async completion?
Any idea why the reload causes this to crash? I've googled this "write after end" and seems like the stream needs to be returned or async actions need an explicit done cb, but I'm not sure how to do that with gulp 4. Any advice would be of great help.
Gulp Version 3.9.1
Gulp Ruby SASS Version 2.1.0
Function:
gulp.task('sass', function() {
sass('C:/xampp/htdocs/bptc/vendor/bower_components/font-awesome/scss/font-awesome.scss',
{ trace: true,
verbose: true
})
.on('error', sass.logError)
.pipe(gulp.dest('public/css/vendor'))
});
Output:
C:\xampp\htdocs\bptc>gulp sass
[12:00:40] Using gulpfile C:\xampp\htdocs\bptc\gulpfile.js
[12:00:40] Starting 'sass'...
[12:00:40] Running command sass --sourcemap=none --trace --update C:/xampp/htdocs/bptc/vendor/bower_components/font-awesome/scss/font-awesome.scss:C:\Users\agf365.BH\AppData\Local\Temp\gulp-ruby-sass\84a250b0f5e0b41f769aa0a7c55878cc\font-awesome.css
[12:00:40] Finished 'sass' after 41 ms
No error messages is appearing yet there are no output files.
When I run gulp, the 'styles' task starts running and sits forever, never finishing and not throwing any error. I have tried to uninstall and reinstall everything I can think of, and nothing seems to make a difference.
This is the function that is not finishing:
gulp.task('styles', function buildStyles() {
return gulp
.src(stylesGulpPaths)
// Copy scss files to build/scss for compass.
.pipe(gulp.dest('build/scss'))
// But only compile main.scss, which imports the rest.
.pipe(filter('**/main.scss'))
.pipe(compass({
css: 'build/css',
http_path: '/',
// image: 'build/images',
require: ['compass/import-once/activate', 'sass-globbing'],
sass: 'build/scss',
}))
.on('error', function (err) { console.error(err.message); })
// 'Concatenate' our one file so we write it to
// build/css/main.css
.pipe(concat('main.css'))
.pipe(gulpif(args.production, minifycss()))
.pipe(gulp.dest('build/css'));
});
var stylesGulpPaths = [
'app/**/*.scss',
'!app/vendor/**/*.scss',
];
Version:
gulp -v => 3.9.1
compass -v => 1.1.0.alpha.3 (Polaris)
node -v => 5.6.0
In my console it gets to the Starting 'styles'... line and just stays there forever.
I am pointing the correct ruby version (2.1.2).
Any thoughts are greatly appreciated.
Fixed it!
There were conflicting compass versions. I just had to uninstall compass, compass-rails, and sass-rails and reinstall compass.
I'm trying to get browser-sync to inject styles using gulp. I've pretty much copied and pasted from the tutorial, but nothing happens. The sass gets compiled correctly, but the injection doesn't happen. Any ideas what I've done wrong, or how to debug this?
I'm also using MAMP if it makes any difference at all.
My Gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
// Proxy Server
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "local.website.com"
});
gulp.watch('../css/source/*.scss', ['sass']);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('../css/source/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('../css/build'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
The response in my console:
[gulp] Starting 'default'...
[gulp] Finished 'default' after 4.61 μs
[BS] Proxying: http://local.website.com
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.8.12:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://192.168.8.12:3001
-------------------------------------
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 114 ms
[gulp] Starting 'sass'...
[BS] 1 file changed (main.css)
[gulp] Finished 'sass' after 115 ms
If it matters, here is my package.json:
{
"devDependencies": {
"browser-sync": "^2.9.11",
"gulp": "^3.9.0",
"gulp-sass": "^2.0.4"
}
}
The problem in my case was Drupal - it uses #import instead of link to add CSS files. This module solves it! https://www.drupal.org/project/link_css
You say you've copy pasted from the tutorial, but you didn't copy this part that actually notifies browserSync of changes:
gulp.watch('../css/source/*.scss').on('change', browserSync.reload);