I have elixir set up to watch changes in .scss files, but changes in _partials.scss are not being watched.
elixir(function(mix){
mix.browserSync([
'resources/assets/bower/bootstrap-sass/assets/**/*'
], {
proxy: 'site.app',
reloadDelay: 200
});
});
When I edit the bootstrap/_variables.scss, gulp does compile those sass changes. If I exit gulp watch, and gulp watch again, then those changes appear.
So I know its compiling correctly, its just somehow not watching those partial files.
Any ideas? Thanks in advance!
This is already in a pull request on the repo. (https://github.com/laravel/elixir/pull/377)
Until fixed, I'm gonna apply the same fix for now as Ricardo (see https://github.com/ricardogobbosouza/elixir/commit/948abb930e0d822a6fa6a8531d52a8d51632c59b)
Related
I am running Laravel 5.4 and using Laravel Mix to compile my assets. I have two SASS files for production. However, one of them needs to be compiled from SASS to CSS without minifying. I don't see how to do that. Here's what I have in my webpack.mix.js file:
mix.js(
[
'resources/assets/js/app.js',
],
'public/assets/js'
)
.sass(
'resources/assets/sass/app.scss',
'public/assets/css'
)
.sass(
'resources/assets/sass/pdf.scss',
'public/assets/css',
)
.version();
Now, the pdf.scss file is the one that needs to be "un-minified" for production. Is there any way to do so?
Thanks for answers!
Hi I found a solution to do this.
mix.sass("src/app.scss", "dist/", {
sassOptions: {
outputStyle: 'expanded',
},
})
sassOption help you to add some features to sass file.you can see all option here".
When you set the value of outputStyle equal to expanded, this will prevent the compression of SCSS files from damaging them. Of course, by doing this, the files will be compressed again.
When I run gulp SASS is converted to CSS and saved to my public directory. Then they are versioned and work great. However, if I run gulp watch and update a SASS file, .sass() runs and copies a new .css file to public, but .version() is never called. How can I fix this?
gulpfile.js
var Elixir = require('laravel-elixir'),
gulp = require('gulp');
Elixir(function (mix) {
mix
.sass('app.scss', 'public/assets/css/app.css')
.version('public/assets/css/app.css', 'public');
});
It seems you cannot output your CSS to the same folder where you want your files versioned if you want to use gulp watch.
When I make either destination folder different, version() suddenly works again.
I'd like to not only have gulp watch watch for changes to specified files, but also to the gulpfile.js itself. Notably, I'm using Laravel and its Elixir asset management tool, which wraps Gulp.
I came across this link which seems to be exactly what I need but when I implement it and then type either gulp watch or gulp and then make changes to my gulpfile those changes aren't reflected.
I'm pretty sure I need to add something to the elixir but not sure what. I have the following for bower but probably need something similar for watch.
Here's the relevant contents of my gulpfile:
/*gulpfile.js*/
gulp.slurped = false; // step 1
gulp.task("watch", function(){
if(!gulp.slurped){ // step 2
gulp.watch("gulpfile.js", ["default"]);
//gulp.watch("etc...");
gulp.slurped = true; // step 3
}
});
gulp.task("default", ["some-task", "another-task", "watch"]);
gulp.task('bower', function() {
return bower();
});
elixir(function(mix) {
// Run bower install
mix.task('bower');
//mix.task('default'); //uncommenting this causes an error when running "gulp"
//mix.task('watch'); //uncommenting this causes an error when running "gulp"
// all other elixir.mix tasks...
mix.copy('resources/assets/js/**', 'public/js');
gulper is one possible answer: https://github.com/anatoo/gulper
So instead of running gulp watch you can run gulper watch
So I like elixir a lot.
But when I run gulp watch and write css (scss to be precise), it crashes after a couple of saves, thus forcing me to start gulp watch again. And it is driving me crazy, almost to the point of me not being able to do my work.
I have looked at stackoverflow at people with similar looking problems, but to no prevail. I have also found a few articles like this: http://maximilianschmitt.me/posts/prevent-gulp-js-from-crashing-on-error/
But either their solution is outdated, or I'm too stupid to use their solution correctly. Most likely the latter...
Here is my gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix
.sass('styles.scss', 'public/css')
.scripts(null,
'public/js/all.js',
'resources/assets/js'
)
.version([
'public/css/styles.css',
'public/js/all.js'
])
});
Any ideas how to fix this?
The problem
gulp watch is set to stop when an error is detected, thus forcing the need to do a manual restart of gulp watch. Irritating.
The solution (not elegant, but it works)
First, my gulp.js as is now:
var gulp = require('gulp'),
elixir = require('laravel-elixir'),
plumber = require('gulp-plumber');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
mix
.sass('styles.scss', 'public/css')
.scripts(null,
'public/js/all.js',
'resources/assets/js'
)
.version([
'public/css/styles.css',
'public/js/all.js'
])
}).pipe(plumber());
});
What I did:
I installed gulp plumber $ npm install --save-dev gulp-plumber
I required gulp plumber and the base gulp dependency to my gulp file
I defined an empty default task, otherwise gulp wouldn't play with me...
I created a gulp task called "watch", otherwise gulp watch wouldn't work in the command line like before.
I defined the gulp.watch() to make gulp, ehh, watch?
I appended .pipe(plumber()); at the end if my elixir function. The plumber is the thing that prevents the gulp watcher from crashing on error
So, to make it easy for you, copy paste the code below into your gulp.js file , run $ npm install --save-dev gulp-plumber, and fill in your own mix
var gulp = require('gulp'),
elixir = require('laravel-elixir'),
plumber = require('gulp-plumber');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
//Your own elixir code as you know it.
}).pipe(plumber());
});
Note you'll be getting an error in the command line / terminal when you run gulp watch. Ignore it. Try to save an scss or js file, reload the brwoser, and you'll see gulp and elixir is doing their job just fine.
The error:
CATCHES!!!
Running gulp does nothing now.
If you make a syntax error, the watcher stops until you fix the error. However, you don't have to manually restart it. Say, if you miss a ; in your scss, it'll work again as soon as you add the ; and save.
NOTE: This is a hack. Not very elegant. But it works. According to contra in this thread: https://github.com/gulpjs/gulp/issues/71 gulp v.4.x.x should fix the problem of gulp watch crashing on finding an error
I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.
Here's a sample of my code :
gulp.task('compile-sass', function() {
gulp.src(buildType+config.path.sass+"/main.sass")
.pipe(compass({
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest(buildType+config.path.css+"/test"));
});
So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :
[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
I know I'm not using any config.rb, but two things :
1) I found no example of such files
2) gulp-compass doc gives example without such a file so I assume it's optional
Thanks in advance.
Thanks to SteveLacy i could manage to fix this.
If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :
var sass = require('gulp-ruby-sass');
gulp.task('compile-sass', function() {
gulp.src(path/to/your/sass/folder/main.sass")
.pipe(sass())
.pipe(gulp.dest('path/to/your/css/folder));
});
The most basic and simple way is:
var sass = require('gulp-ruby-sass');
gulp.task('styles', function() {
gulp.src('sass/*.scss')
.pipe(sass({
noCache : true,
style : "compact"
}))
.pipe(gulp.dest('css'));
});
The newest version of node-sass which is used by gulp-sass supports sass and scss syntax.
https://github.com/sass/node-sass/releases
or the latest release at this moment
https://github.com/sass/node-sass/releases/tag/v0.9.3
node-sass is using libsasss
https://github.com/sass/libsass/releases
Look at their 2.0 release notes.
I know this may not be the correct place for this answer, but there wasn't much on Google for people with gulp-ruby-sass errors.
For anyone receiving an error "source does not match any files." Be sure to make sure the path(s) you place within gulp.src() have at least 1 sass (or scss) file within them.
In my situation, I had 3 paths for the task and only 1 of the paths was completely empty. By adding a blank file (_fake.scss) to that path the error was fixed.
Hope this helps someone!
Newer versions of node-sass (and therefore gulp-sass, which is just a thin wrapper around node-sass) handle both sass and scss syntax, and decides which syntax to use by reading the file extension.
Here is a demonstration of a gulp file which handles both scss and sass syntax (not that you'd want that in your project):
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('my-sass-task', function () {
return gulp.src('styles/**/*.sass') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
gulp.task('my-scss-task', function () {
return gulp.src('styles/**/*.scss') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
This doesn't seem to be documented anywhere easy to find, I just happened to stumble on it.
Side note: I was wooed by sass but think I'll be moving to scss instead. This SO question has a lot of useful information in the answers if you're hovering over which to choose.