Configure Grunt-Bower-Install path for a Component - gruntjs

How do I specify the default file to use for a bower component so that it will be injected properly by grunt-bower-install?
I am working with datejs and they have different files depending on your localization. The file I'm wanting to include is not in the root of bower_components/datejs directory so I get the error:
datejs was not injected in your file.
Please go take a look in
"app/bower_components/datejs" for the file you need, then manually
include it in your file.
I'm trying my hardest to avoid hardcoding datejs into my index file and don't really want to move "date-en-US.js" file into the root of the datejs directory either.
This is the structure of the datejs bower component.
bower_components
└── datejs
└── build
└── ...
└── date-en-US.js
└── ...
└── src
└── test
And just in case this helps, this is the .bower.json file that is located in the datejs bower component path:
{
"name": "datejs",
"homepage": "https://github.com/datejs/Datejs",
"_release": "7bdddb55d6",
"_resolution": {
"type": "branch",
"branch": "master",
"commit": "7bdddb55d69719e42c358c3a2b7df706ff3090f8"
},
"_source": "git://github.com/datejs/Datejs.git",
"_target": "*",
"_originalSource": "datejs",
"_direct": true
}

A little late to the party but you can override the main property of a repo to define whatever file you want to inject into your app. To do this you need to use the overrides property in YOUR bower.json.
Try this:
{
"name": "name",
"version": "x.x.x",
"dependencies": {
"datejs": "x.x.x"
},
"overrides": {
"datejs": {
"main": "build/date-en-US.js"
}
}
}

I too was frustrated by this a few times. What I found in my cases was that "grunt bower-install" requires a "main" entry in the .bower.json. It's a string or array of strings that point to the relevant JS and/or CSS files that should be installed.
In your case I do not see the "main" and would suggest you create one that contains the desired datejs files. I would suggest the source files if you intend to use grunt for minification/etc. You can look at other successful components to see examples of the "main" entry.
I suspect that some components do not supply the entry because they have no single usage pattern (i.e. you can mix and match the files you require), but this is just speculation on my part.

Try adding this in your grunt file:
'bower-install': {
fileTypes: {
fileExtension: {
detect: {
typeOfBowerFile: /-en-US.js/
}
}
}
}
I didn't try this out, and my regex might be off. But accoriding to the grunt-bower-install readme, it states See [wiredep's](https://github.com/stephenplusplus/wiredep) readme for more options of customization and there it shows using the above configuration.
Essentially - grunt-bower-install doesn't know what to look for. This option appears to tell it that info.

Related

Live SASS Compiler creating extra files?

I'm currently trying to learn how to implement SASS into my web development projects but I'm struggling a little bit with figuring out how to properly compile my .scss files into one single .css file.
When I run sass --version in my terminal, I receive 1.53.0 compiled with dart2js 2.17.3. As far as extensions go, I'm using Live Sass Compiler by Glenn Marks, and within the settings.json file, my configuration looks like this:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"defaults"
]
}
This is my current project directory:
Current Project Directory Structure
My current issue is that whenever I click Watch Sass, the only file I want to be output is the main.css and main.css.map but it creates an index.css and index.css.map file as well.
I'm trying to implement something similar to the 7 - 1 SASS Architecture, and within each of those folders I created an index.scss that'll contain each file in it's directory, which will then be #forward to the main.scss.
Is there any particular way I can avoid the extra files being created? I'm not too familiar with npm but I've heard it would be more beneficial to learn it in order to utilize SASS as opposed to using a VS Code extension and I'm more than open to taking that approach and scrapping the entire extension as a whole if it proves to be more efficient.
Thank you for your help in advanced, I hope I provided enough information!
Dart sass comes with an inbuilt compiler
Just run the code
sass --watch sass/main.scss css/main.css
This one faulty line is probably the reason for your problem.
Change this:
"liveSassCompile.settings.generateMap": true,
to this:
"liveSassCompile.settings.generateMap": false,
If you decide to stick with my extension then you can specify a single file to output/watch with the liveSassCompile.settings.includeItems setting - as shown below
{
"liveSassCompile.settings.includeItems": [ "/path/to/main.scss" ]
}
Alternatively, and possibly a better solution, you can use a negative glob expression in the liveSassCompile.settings.partialsList to treat every other file as a partial. Then, when any SASS file is saved, it triggers compilation of just your main.scss file

How do I change sass output directory?

I have this folder structure:
sass/main.sass
css/main.css
js/...
img/...
I want the sass output to go to the css folder, but each time I run sass watcher it creates a new css file within the sass directory among sass files.
Thx for information about using 'Live SASS Compiler' in VS Code.
To set special otuput pathes to your project you need to add the settings for output pathes to the settigns.json of your project:
File: `projectDIR/.vscode/settings.json'
Example for setting the save pathes to output directory:
"settings": {
// output: generate files to ...
// ~ = path starts relative from scss-file
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../assets"
},
// ad a compressed version
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../assets"
}
// optional: add more outputs ...
],
}
See also official example in web: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Additional hint:
VERSION OFF 'LIVE SASS COMPILER' MAY BE OUTDATED
The actual commmon used Extension Live Sass Compiler is not longer supported (for years now). It uses an outdated SASS Version. The most recent features like #use are not supported in that version. You use that outdated version if author is 'Ritwick Dey'.
But there is an active supported fork with same name 'Live SASS Compiler' build by 'Glenn Marks'. As fork it works the same way and the settings are almost the same. Or you can use another actual compiler which is faster as you can use an direct installed SASS Version on your system. In that case you need to change the settings for your project.
Information about that you will find here:
https://stackoverflow.com/a/66207572/9268485
Updated: Correction name of author of supported extension 'Live SASS Compiler' to correct identification of extension.
Go to path: C:\Users\your user\AppData\Roaming\Code\User\settings.json
and change there the "liveSassCompile.settings.formats" section
for example:
the parameter : "savePath": "/Python/CSS",

Includes specific .css conditionally with web pack

I have a web application built with webpack. I have many styling variations, and those styles are all called style.css and in their own respective directories like
./STYLE_A/style.scss
./STYLE_B/style.scss
./STYLE_F/style.scss
I am supplying a cross-env variable STYLE_DIR to webpack and I want that variable to control where the scss gets included from.
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in the webpack (does nothing)
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in my client.js (ends up including every style.scss from every one of the style directories)
I've tried setting this to a 'process.env' variable in webpack, I've tried using an alias to resolve, there's something I'm just missing.
I got interested in your question, then I did a little research and I think I have a way to make it work.
Steps:
1.
In Webpack config file use DefinePlugin in order to have a constant that can be setup at compile time. You do that in this way:
const GLOBALS = {
'process.env.STYLE_DIR': JSON.stringify(process.env.STYLE_DIR)
};
export default {
entry: [
'./app/index'
],
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin(GLOBALS)
],
...
}
2.
Put your style.scss file in the correct folders (STYLE_A, STYLE_B and STYLE_C as you indicated).
3.
In your .js file require your SCSS file as follow (of course be sure to have the corresponding loaders properly setup in Webpack config file):
require(`./${process.env.STYLE_DIR}/style.scss`);
4.
Set the STYLE_DIR variable before you run webpack. Something like this:
export STYLE_DIR = 'STYLE_A'
This is working for me. If I change the STYLE_DIR value before running Webpack I get a different style file imported.
I hope this helps.

Grunt Pleeease: Extend existing source map

I write Sass and use grunt-pleeease to inline #includes etc.
Unfortunately pleeease inlines its source map and ignores the existing one.
The source map file from sass is in the same folder as the css I pass to pleeease (main.css and main.css.map)
Is there a way to tell pleeease to use the existing source map and extend it?
I've also run into this problem. Currently, the pleeease grunt task doesn't write out the external source map even if you select the correct options. You can edit the task to make it do this anyway. I've submitted a pull request to the project on GitHub for this fix.
Note that I still had to specify the in and out options (pleeease gets the location of the original source map from the css file's sourcemap comment; you can specify this manually also using the prev option for sourcemaps, just note that you have to set that option to the contents of the sourcemap file, not the path of the sourcemap file--grunt.file.read() will be of use there):
pleeease: {
dist: {
options: {
in: 'build/styles/styles.css',
out: 'public/styles/styles.min.css',
sourcemaps: {
map: {
inline: false,
sourcesContent: true
}
}
},
files: {
'public/styles/styles.min.css': 'build/styles/styles.css'
}
}
},
Until this fix is implemented into the master branch and published on NPM, you can use the GitHub address of my pull request branch in your package.json to get the fix (please note that I will eventually remove this branch if my pull request is accepted or the fix is achieved in some other way):
"grunt-pleeease": "zeorin/grunt-pleeease#sourcemap-external",

Watching multiple "file arrays" in gruntjs

So in my config file, I'm statically defining the css files to watch, along with some html partials. (eventually I will minimatch with exclusions .. I'm just going with first pass right now)
Originally I was storing these in the grunt config object, but struggled to get the output I wanted, so I moved them out of the initConfig method and into the wrapping function:
Original pass:
grunt.initConfig({
cssFiles: [ ... list of files ... ],
htmlFiles: [ ... list of files ...],
watch: {
reload: {
files: ['<%= cssFiles.concat(htmlFiles).join(",") %>']
}
}
});
I tried several variations of this (with and without join), as an example.
Current "Working" version:
module.exports = function(grunt) {
var cssFiles = ['someFile.css',...'lastFile.css'],
htmlFiles = [ ... ];
grunt.initConfig({
watch: {
reload: {
files: cssFiles.concat(cshtmlFiles)
}
}
});
};
I feel like I should be able to do this without having to move my array's out of the grunt config (although I don't know WHY I feel they should stay there ... I guess I just haven't seen many Gruntfile's with code outside of initconfig)
I'm using a system that stores all the paths I need in a single config object, like so:
grunt.initConfig({
pathTo: {
distcss : './dist/css/master.css',
srcstyles : './lib/styles/**/*.scss',
vendor : './lib/vendor'
},
// tasks...
});
Then, I load those in via underscore templates like in your first example. If your project is structured in a good way then usually just having one minimatch pattern is enough. All my CSS ends up in lib/styles, and any misc. third party stuff is usually in lib/vendor as that is managed through Bower.
With the right directory structure and pattern you shouldn't need a large array of paths. A sample JavaScript project could look like this:
lib
└── src
├── app
└── tests
Then your minimatch pattern to lint your application and test code would just be lib/src/**/*.js, for example.
But what works for you works for you; if you've written a system that you're happy with, regardless of whether you've seen it elsewhere or not, there's no reason to change it. :-)

Resources