Gulp-sass will not compile to CSS - sass

I'm not able to get grunt-sass to compile to .css. Have seen a load of other similar posts and utilized suggestions but nothing seems to work.
I can get other plugins working fine (for example 'del' to delete stuff, shown here) so it seems my environment is ok, and i can get ordinary vanilla sass compile/watch to work fine.
Here's my setup just in case:
OSX Maverics 10.9.5
$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
$ sass -v
Sass 3.4.9 (Selective Steve)
$ npm -v
2.1.12
$ brew -v
Homebrew 0.9.5
Here's the project directory structure:
├── index.html
│
├── scss
│ └── base.scss
│ ├── _partial1.scss
│ └── _partial2.scss
│
├── assets
│ └── css
│ └── Nothing yet!
│
├── deltest
│ └── save.txt
│
├── gulpfile.js
│
└── node_modules
└── etc ...
Here's my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var del = require('del');
gulp.task('gsas', function() {
gulp.src('./scss/base.scss')
.pipe(sass({ includePaths : ['./scss/'] }))
.pipe(gulp.dest('./assets/css'))
});
del(['!deltest/save.txt', 'deltest/delete.txt'], function (err, deletedFiles) {
console.log('Files deleted:', deletedFiles.join(', '));
});
gulp.task('default', function() {
console.log('AAAAAAAAAAAAAAAARGH!');
});
Can anyone see what is wrong here?
UPDATED - with same task silently failing on a windows box:
Here's the gulpfile.js from the windows box test and I'm not even #importing any partials (the dir structure is exactly as shown in the task setup, which i pulled straight from the actual plugin example):
var gulp = require('gulp');
var sass = require('gulp-sass');
var del = require('del');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
del(['delete/delete.txt', '!delete/save.txt'], function (err, deletedFiles) {
console.log('Files deleted:', deletedFiles.join(', '));
});
gulp.task('default', function () {
console.log("Made it!");
});
In this example again I'm getting the 'del' task to run fine but gulp-sass fails silently and it's really baffling.

If you want the sass task to execute when you run gulp from the command-line, add it as a dependency of the default task:
gulp.task('default', ['sass'], function() {
//other stuff
});

Related

Best way to override single method in Illuminate\Foundation\Application through service provider

I just made changes to the application structure for my Laravel application. It works well when runnning tests (for the Http controllers). The problem is when i try to run artisan commands (that literally need to access "getNamespace()" method), it wont resolve the namespaces.
Here are the composer.json:
"autoload": {
"psr-4": {
"App\\": "app/",
"Database\\Factories\\": "database/factories/",
"Database\\Seeders\\": "database/seeders/",
"Modules\\": "modules/"
},
"files": [
"app/Helpers/app.php",
"app/Helpers/form.php",
"app/Helpers/view.php"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
I do aware that i can add Modules\ModuleA, Modules\ModuleB to the composer json, but that put alot of work. So i decided to override the getNamespace() method instead, but what is the best way to override single method illuminate/foundation/xxx classes through service provider?
Folder tree:
laravel-project/
├── app/
│ ├── Exception
│ ├── Providers
│ └── ...
├── modules/
│ ├── ModuleA/
│ │ ├── Services
│ │ ├── Http/
│ │ │ ├── Controllers
│ │ │ └── Requests
│ │ └── Models
│ └── ModuleB/
│ └── ...
├── tests
└── ...
If you want to override a single method in Illuminate\Foundation\Application through a service provider in Laravel, you can use the following steps:
Create a new service provider by running the command php artisan make:provider YourServiceProvider in your terminal.
In your YourServiceProvider class, extend the Illuminate\Support\ServiceProvider class.
Override the register() method in your YourServiceProvider class. In this method, you can bind your custom implementation of the method you want to override to the container. For example, if you want to override the loadEnvironmentFrom() method, you can do so as follows:
use Illuminate\Foundation\Application;
class YourServiceProvider extends ServiceProvider
{
public function register(){
$this->app->bind(Application::class, function ($app) {
return new class($app) extends Application {
public function loadEnvironmentFrom($file)
{
// Your custom implementation here
}
};
});
}
}
Then in your config.app file, add the service provider to the list of providers:
'providers' => [
// Other service providers
App\Providers\YourServiceProvider::class,
],
This way, the method you've overridden will use your custom implementation instead of the default implementation in Illuminate\Foundation\Application.
Hope this helps

Failure: Cannot find module handler AWS Lambda

Hello I am trying to setup a new serverless graphql project but the serverless.yml file doesn't find my handler, which is in src/graphql.ts
It throws an error like this:
Failure: Cannot find module '/Users/VIU/Projects/am/src/graphql'
The src is in the root directory and the path is correct, so I don't understand what is going on.
The serverless.yml looks like this:
graphql:
handler: src/graphql.graphqlHandler
events:
- http:
path: graphql
method: post
cors: true
- http:
path: graphql
method: get
cors: true
And the graphql handler file like this:
import { ApolloServer, gql } from "apollo-server-lambda"
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
type Query {
hello: String
}
`;
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};
const server = new ApolloServer({ typeDefs, resolvers });
exports.graphqlHandler = server.createHandler();
I've also tried
module.exports.graphqlHandler = server.createHandler();
export const graphqlHandler = server.createHandler();
But none of that seems to work either.
Has someone any idea of what I am doing wrong? Thank You!
In order to run an AWS Lambda function with a Node.js runtime, you'll need to provide a .js file as its handler. Specifically, when using TypeScript and the Serverless framework, that means that the handler field must refer to the compiled file name, namely, ending with a .js extension.
One option for you to resolve this is to simply change the handler field to point to the compiled version of your file. For example, given the following structure:
├── am
│ ├── built
│ │ └── graphql.js
│ ├── package-lock.json
│ ├── package.json
│ └── src
│ └── graphql.ts
└── serverless.yaml
The correct handler field is:
graphql:
handler: built/graphql.graphqlHandler
However, another option which I believe is the preferred one (and possibly what you were originally aiming for) is to use the serverless-plugin-typescript plugin of the Serverless framework. That should reduce your efforts and allow you to use TypeScript almost seamlessly. There is actually an example provided by Serverless that is very similar to your need and I think you can find useful.

Gulp destination relative to source

I am trying to parse all SCSS files in all folders, and I need them to be in relative destinations to the original file.
Here is the representation of folder structure I want (basically, scss files in scss folders need to be saved as css files in css folder next to the original scss folder) and rogue scss files (not in scss folder) should have css file saved in same destination as the scss file.
html
│ README.md
│
└───app_abc
│ │ index.php
│ │ something_else.php
│ │
│ └───styles
│ └───scss
│ │ _mixins.scss
│ │ layout.scss
│ │ content.scss
│ │
│ └───css
│ layout.css
│ content.css
│
└───app_def
│ │ index.php
│ │ something_else.php
│ │ rogue.scss
│ │ rogue.css
│ │
│ └───styles
│ └───scss
│ │ _mixins.scss
│ │ layout.scss
│ │ content.scss
│ │
│ └───css
│ layout.css
│ content.css
└───app_ghi
...
I tried playing with it for hours yesterday and today, but to no avail. I can make it to create the CSS file in the same folder, but that's not what I want.
Here is my gulpfile.js (there is a lot of "debug" stuff in it).
var gulp = require('gulp'),
sass = require('gulp-sass'),
path = require('path'),
through = require('through2');
const debug = require('gulp-debug');
const sassFiles = './html/**/[^_]*.scss';
function parsePath() {
return through.obj(function (file, enc, cb) {
console.log(file.base);
console.log(file.cwd);
console.log(file.path);
console.log(file.name);
console.log(path.relative(file.cwd, file.path));
console.log(path.relative(path.join(file.cwd, file.base), file.path))
console.log(path.relative(path.join(file.cwd, file.base), file.path).replace('scss', 'css'))
console.log(file.path.replace(file.name, '').replace('scss', 'css'))
cb();
});
}
gulp.task('sass', function(){
return gulp.src(sassFiles)
.pipe(debug({title: 'test:', minimal: false}))
.pipe(parsePath())
.pipe(sass().on('error', sass.logError))
//.pipe(gulp.dest('css'))
//.pipe(gulp.dest(function (file) {
//return file.path.replace('scss', 'css');
//return path.relative(path.join(file.cwd, file.base), file.path).replace('scss', 'css');
//}))
.pipe(gulp.dest(function (file) {
console.log(file.base);
return file.base;
}));
});
gulp.task('watch', ['sass'], function(){
gulp.watch(sassFiles, ['sass']);
})
Thanks for any help.
Ps.: In any case it was needed, I am running on Debian Jessie x64.
Pps.: I did google and read quite a lot of stackoverflow threads, but none of them had a solution to my problem (well, if it had, it didn't work for me).
This is working. It handles your rogueSASS files correctly and creates a css folder where you want it with the css files in there.
IMPORTANT : The gulp.src files are relative to where your gulpfile.js is located. For this code I have it in the HTML folder - at the same level as the app_xxx folders. If you put it somewhere else you will have to modify the sassFiles and rogueSassFiles declarations.
var gulp = require("gulp");
var sass = require("gulp-sass");
// flatten can be useful to solve tricky long directory changes
// var flatten = require("gulp-flatten");
var rename = require("gulp-rename");
// var using = require("gulp-using");
const sassFiles = './**/styles/scss/*.scss';
const rogueSassFiles = ['./**/*.scss', '!./**/styles/**'];
gulp.task('watch', ['sass', 'rogueSASS'], function () {
gulp.watch( sassFiles, ['sass']);
gulp.watch( rogueSassFiles, ['rogueSASS']);
})
gulp.task('sass', function () {
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
// remove the "scss" folder name from the end of the directory list
.pipe(rename(function (path) {
var temp = path.dirname.slice(0, -4);
path.dirname = temp + "css";
}))
.pipe(gulp.dest('.'))
})
gulp.task('rogueSASS', function () {
return gulp.src(rogueSassFiles)
// gulp-using shows which files are getting through gulp.src !!
// .pipe(using())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('.'))
})
These could be made into one task.

Watching and compiling multiple sass directories with multiple config.rb files with gulp

I've got a file tree roughly as follows:
sites
|
+-- all
| |
| +-- css/
| +-- scss/
| \-- config.rb
|
+-- mysite.com
| |
| +-- css/
| +-- scss/
| \-- config.rb
This is my gulpfile (simplified):
'use strict';
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('compile-css', function() {
return gulp
.src("./sites/all/scss/*.scss")
.pipe(compass({
config_file: './sites/all/config.rb',
sass: "./sites/all/scss"
}))
.pipe(gulp.dest("sites/all/css"));
});
gulp.task('default', ['watch']);
gulp.task('watch', function() {
gulp.watch('./sites/wirefly.com/**/*.scss', ['compile-css']);
});
Which currently works just fine for compiling all the scss files in the /all/scss/ directory and dumping them into the /all/css/ directory, as per the configuration in the /all/config.rb file.
Is there a way I can have gulp watch ALL scss files in the project and use the proper config.rb file for output? i.e files in /all/scss/ would be compiled according to the /all/config.rb settings, while /mysite.com/scss/ would be compiles according to the /mysite.com/config.rb settings.
Or maybe just get rid of the config.rb files entirely and leverage gulp to put the files where they should go?
I COULD write a separate task for the scss files in the /mysite.com directory but that's not elegant or scalable, should more subdirectories be introduced.
As it turns out, I ended up using a callback in the "change" event of the watch task, as such:
var relativePath;
gulp.task('main-compass', function() {
return gulp
.src(relativePath + '/*.scss')
.pipe(compass({
config_file: relativePath + "/../config.rb",
sass: relativePath
}));
});
gulp.task('default', ['watch']);
gulp.task('watch', function() {
gulp.watch('./sites/**/*.scss').on('change', function(file) {
var regexDir = /sites(.*)/g;
var partialDir = file.path.match(regexDir);
relativePath = path.dirname(partialDir);
gulp.run('main-compass');
});
});
So the relativePath variable is assigned the relative path to the changed file, then the main-compass task utilizes the config.rb file that is one directory up from the changed sass file.
There may be a better way to do this, but this gets the job done for now.

Can't get gulp-ruby-sass or gulp-sass to work at all

I'm trying to use gulp-ruby-sass and/or gulp-sass but neither are working for me and think i've got it all set up correctly. I've looked at a bunch of other SO posts but nothing works for me as yet.
I've got another gulp task which is recursively copying an assets directory and index.html from src to dist and this works every time.
To test the sass setup is correct i run a vanilla sass compile and then run gulp; the sass changes work and render via the recursive copy. Here's the commands for that sass test:
$ sass ./sass/main.scss ./src/assets/css/main.css
$ gulp
Forgetting the vanilla sass test and back to the gulp sass issue here - in my gulpfile i'm running the gulp sass task before i run the recursive copy task, so if it worked then the sass changes should be applied and copied. At least that's what i thought.
Here's my dir structure showing relevant files:
├── src
│ ├── index.html
│ └── assets
│ ├── css
│ │ └── main.css
│ ├── js
│ │ └── app.js
│ └── img
│ └── etc.jpg
│
├── dist
│ └── index.html ( from ./src via recursive copy)
│ └── assets
│ └── (same as ./src/assets via recursive copy)
│
├── sass
│ ├── main.scss
│ ├── _partial1.scss
│ ├── _partial2.scss
│ └── etc ...
│
├── gulpfile.js
│
├── node_modules
│ └── etc ...
│
└── bower_components
└── etc ...
In gulpfile.js there are a couple of file mapping objects which work fine for the recursive copy of src/assets/. But for the sake of testing the gulp-ruby-sass task i'm hard-coding the sass/css paths to remove the possibility of the file mapping as an error.
For the record I'm running on OSX Maverics 10.9.5 and think i have the correct environment setup:
$ ruby -v
ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin13]
$ sass -v
Sass 3.4.9 (Selective Steve)
Here's my gulpfile.js showing approaches that i've tried so far, with gulp-sass related task commented-out:
var gulp = require('gulp');
var watch = require('gulp-watch');
var gsass = require('gulp-ruby-sass');
// var gsass = require('gulp-sass');
var gutil = require('gulp-util');
// Base paths:
var basePaths = {
srcRoot: './src/',
distRoot: './dist/',
bowerRoot: './bower_components/'
};
// File paths:
var filePaths = {
sassRoot: basePaths.srcRoot + 'sass/',
assetsBuildRoot: basePaths.srcRoot + 'assets/',
jqMin: basePaths.bowerRoot + 'jquery/dist/jquery.min.js',
html: basePaths.srcRoot + 'index.html'
};
// With gulp-ruby-sass
gulp.task('compile-sass', function() {
gulp.src('./sass/main.scss')
.pipe(gsass({sourcemap: true, sourcemapPath: './sass/'}))
.on('error', function (err) { console.log(err.message); })
.pipe(gulp.dest('./src/assets/css'));
});
// With gulp-sass
// gulp.task('gsass', function () {
// gulp.src('./sass/*.scss')
// .pipe(gsass())
// .pipe(gulp.dest('./src/assets/css'));
// });
// Assets directory copied recursively from /src to /dist:
gulp.src(filePaths.assetsBuildRoot + '**/*.*', {base : basePaths.srcRoot})
.pipe(gulp.dest(basePaths.distRoot));
// Copy index.html from /src to /dist:
gulp.src(filePaths.html)
.pipe(gulp.dest(basePaths.distRoot));
gulp.task('default', function() {
// With gulp-ruby-sass
// return gulp.src('./sass/main.scss')
// .pipe(gsass({sourcemap: true, sourcemapPath: './sass/'}))
// .on('error', function (err) { console.log(err.message); })
// .pipe(gulp.dest('./src/assets/css'));
// gulp.watch('compile-sass');
console.log('You reached the finishing line');
});
I have tried allsorts to bugfix, e.g.:
Removing all of the vanilla sass compiled .css files and running the gulp compile, but no .css is produced.
Also tried removing all of the *.map files generated by the vanilla sass compile then running gulp but no dice.
Can anyone see anything glaringly and obviously wrong?
Thanks in advance.
If you are using Sass >= 3.4, you will need to install gulp-ruby-sass version 1.0.0-alpha:
npm install --save-dev gulp-ruby-sass#1.0.0-alpha
In this new version, gulp-ruby-sass is a gulp source adapter and the syntax has changed slightly. Instead of:
gulp.task('compile-sass', function() {
gulp.src('./sass/main.scss')
task code here
});
The new syntax is:
gulp.task('compile-sass', function() {
return sass('./sass/main.scss')
task code here
});
You can find more info in the new version documentation including the new syntax for sourcemaps. https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0

Resources