Laravel elixir already comes with bunch of its own dependent node modules. How to use that modules instead of creating dependency in the root package.json.
For example, I want to use "del" package which is already there in /node_modules/laravel-elixir/node_modules/del, so rather than mentioning it on the /package.json, how can use this one?
You could try to set up your gulp file like this:
var gulp = require('gulp'),
del = require('del');
gulp.task('default', function() {
});
gulp.task('watch', function() {
gulp.watch('resources/**', ['default']);
elixir(function(mix) {
//Standard elixir code
});
});
Do note typing $ gulp in cli won't do anything anymore, unless you define something in the default task. $ gulp watch will work as always though.
I have no idea if this works without first requiring the dependency in package.json, but give it a try :)
Related
I REALLY hope this isnt a duplicate but i have searched countless posts on here and cant find this specific issue, hopefully the stackoverflow community can help
I am new to Gulp and Sass and am in the process of setting up a simple template to experiement and prepare future projects, but ive hit a snag
i have the following folder structure for testing (il adjust this when its all working to be better)
Template
-- node_modules
-- stylesheets
-----test.scss
-----test.css (generated by the gulpfile.js)
gulpfile.js
package.json
my gulp file is as follows, a simple watch on test.scss to create and update test.css
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError));
});
//Watch task
gulp.task('default',function() {
gulp.watch('stylesheets/**/*.scss', ['styles']);
});
Now when i run gulp and save a style in test.scss i get something like this in cmd
Starting 'styles'...
Finished 'styles' after 49 ms
So i believe there are no errors, however when i look in the test.css file that is created / updated there are no styles!
it does however copy over comments... so if i put in /* comment / into test.scss then sure enough / comment */ appears in text.css
gulp-sass installed succesfully but im really confused as to what im missing
Thanks in advance
James
P.S, versions of things etc, i also have a XAMPP webserver set up locally
Node => v6.11.1,
gulp => CLI version 1.3.1, Local version 3.9.1,
ruby => 2.4.1p111,
sass => 3.5.1 (Bleeding Edge)
npm => 3.10.10
I think
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError));
});
should be
gulp.task('styles', function() {
return gulp.src('stylesheets/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./stylesheets'));
});
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 am relatively new to gulp. I have one issue when I try to compile one directory with subfolders with their sass files.
Folder structure:
|_sass
|__folder1
| |_file.sass
|__folder2
| |_file.sass
|__folder3
|_file.sass
My simple gulp task to try the compilation
gulp.task('sass', function(){
return sass('sass/')
.pipe(gulp.dest('css');
}
This task above doesn't work with a folder but if I specify the file like in gulp task below, it works correctly.
gulp.task('sass', function(){
return sass('sass/folder1/file1.sass')
.pipe(gulp.dest('css');
}
I have checked the documentation of the repository (gulp-ruby-sass) and other topics in stackoverflow and the one solution that i have found is import all sass code into one file and compile it.
I have tried different paths: ./sass, sass, sass/ even the last syntax with gulp.src(path/**/*.sass) with gulp-sass repository as well.
Can you help me?
Thanks in advance
Edit: Using gulp-sass, not gulp-ruby-sass, since gulp-ruby-sass does only support single files, as mentioned in the docs:
gulp-ruby-sass doesn't support globs yet, only single files or directories. Just like Sass.
You should create a stream with valid glob arguments gulp.src() instead of just calling sass() directly and call it in a pipe():
gulp.task('sass', function (){
return gulp.src([
'sass/folder1/file.sass',
'sass/folder2/file.sass',
'sass/folder3/file.sass'
])
.pipe(sass())
.pipe(gulp.dest('css'));
});
If the files you just want to import are named correctly (starting with an underscore), this should work as well:
gulp.task('sass', function (){
return gulp.src('sass/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('css'));
});
Edit: Fixed some code errors - SO needs a linter (;