Separating app and vendor css in Brunch - brunch

My Brunch template compiles all my code into app.js and all third party dependencies into vendor.js (a pretty standard approach). I'd like to do the same with CSS and it used to work but as I moved to using Bower something stopped working and I now get the following error:
Error: couldn't load config /path-to-root/config.coffee. SyntaxError: unexpected {
at Object.exports.loadConfig (/usr/local/share/npm/lib/node_modules/brunch/lib/helpers.js:448:15)
from a configuration file (config.cofee) that looks like this:
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(bower_components|vendor)/
'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/
stylesheets:
joinTo:
'stylesheets/app.css': /^app/
'stylesheets/vendor.css': /^(bower_components|vendor)/
If I instead just strip out the two lines for stylesheets and put this single line in its place it works without error:
'stylesheets/vendor.css': /^(app|bower_components|vendor)/
I've been sort of living with this but this is causing more and more problems and I'd like to get it sorted. Any help would be greatly appreciated.
In case the question comes up ... the version of brunch I'm using is 1.7.6.

I am baffled but I think Paul's suggestion that maybe a special character had gotten into the file seems likely. I now have it working with a configuration that appears to be identical to what was NOT working earlier. Here's the full configuration file:
sysPath = require 'path'
exports.config =
# See http://brunch.io/#documentation for documentation.
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(bower_components|vendor)/
'test/javascripts/test-vendor.js': /^test(\/|\\)(?=vendor)/
stylesheets:
joinTo:
'stylesheets/app.css': /^app/
'stylesheets/vendor.css': /^(bower_components|vendor)/
templates:
precompile: true
root: 'templates'
joinTo: 'javascripts/app.js' : /^app/
modules:
addSourceURLs: true
# allow _ prefixed templates so partials work
conventions:
ignored: (path) ->
startsWith = (string, substring) ->
string.indexOf(substring, 0) is 0
sep = sysPath.sep
if path.indexOf("app#{sep}templates#{sep}") is 0
false
else
startsWith sysPath.basename(path), '_'

It's pretty weird but I had to do the following (add / at the end) for the same case
stylesheets: {
joinTo: {
'css/vendor.css': /^(vendor|bower_components)\//,
'css/styles.css': /^app\/css\//
}
}

I had the same problem as Ken. What solved it for me is just deleting the offending lines from the config.coffeefile and simply just re-typing them again from scratch. This ensures no hidden characters are present and makes the script running again.

Related

eslint no-restricted-imports - prevent an import from from path ending with pattern

According to the eslint no-restricted-imports documentation
When using the object form, you can also specify an array of
gitignore-style patterns:
"no-restricted-imports": ["error", {
"paths": ["import1", "import2"],
"patterns": ["import1/private/*", "import2/*", "!import2/good"] }]
(Emphasis mine)
What I'm trying to do is restrict imports from parent index files - as this is causing issues with cyclical dependencies (I am also using the import/no-cycle rule, but it makes sense to also explicitly use this rule.)
That is, I want to ban imports like:
import foo from "../..";
import bar from "../../..";
I also want to ban imports like:
import a from "../Components";
but not like
import b from "../Components/Foo";
I have tried using this rule:
'no-restricted-imports': [
'error',
{
patterns: [
'**/..',
'**/Components'
]
},
But this causes on errors on imports of:
import b from "../Components/Foo";
Is there a way to specify 'end of string' in a gitignore style pattern?
First, make sure you don't have set import/no-relative-parent-imports, or any ../ import would fail.
Second, if this really follows .gitignore rules, you cannot have rules for folders (like **/.. or **/Components).
Because, once you ignore a folder, any other rule for elements inside that folder would be ignored.
Try:
'no-restricted-imports': [
'error',
{
patterns: [
'**/../*',
'!**/../Components',
'**/../Components/*',
'!**/../Components/Foo',
]
},

grunt custom task copying files that should be omitted

I have a pair of grunt copy tasks defined:
copy : {
develop : {
expand : true,
flatten : false,
cwd : "develop/",
src : ["index.html", "gwt/**/*", "!**/*.less", "!**/*.scss", "modules/**/*", "components/**/*", "resources/**/*", "!resources/styles/**"],
dest : "build/"
},
// TODO: figure out how to update glyphicon paths to build
bootstrap_assets : {
expand : true,
flatten : false,
src : ["bower_components/bootstrap-sass/assets/fonts/**/*"],
dest : "build/"
},
}
and combine them in the custom task
// Intermediate Task - Copy dev resources to build
grunt.registerTask("copy_dev", ["copy:develop", "copy:bootstrap_assets"]);
Inside the modules folder, I want to copy all the contents BUT the scss files. When I run grunt copy:develop, that has the behavior I expect, with all files except *.scss copying over. However, when I run grunt copy_dev, all the contents of modules gets copied over.
This is part of the output from grunt copy_dev --verbose:
Running "copy:develop" (copy) task
Verifying property copy.develop exists in config...OK
Files: develop/modules/front-page -> build/modules/front-page
Files: develop/modules/front-page/front-page.html -> build/modules/front-page/front-page.html
Files: develop/modules/front-page/front-page.scss -> build/modules/front- page/front-page.scss
Files: develop/modules/login -> build/modules/login
Files: develop/modules/login -> build/modules/login
Files: develop/modules/login/bigLogo.png -> build/modules/login/bigLogo.png
Files: develop/modules/login/login-view.html -> build/modules/login/login-view.html
Files: develop/modules/login/login.js -> build/modules/login/login.js
Files: develop/modules/login/login.scss -> build/modules/login/login.scss
Files: develop/modules/login/logo -> build/modules/login/logo
Files: develop/modules/login/logo/lg.png -> build/modules/login/logo/lg.png
Files: develop/modules/login/logo/md.png -> build/modules/login/logo/md.png
Files: develop/modules/login/logo/sm.png -> build/modules/login/logo/sm.png
As you can see, there are a number of *.scss files being copied when executing the custom task, whereas they do not via the regular copy:$name call.
Why is this?
Your issue is that Grunt processes your src/dest directives from left to right to build the list of files to copy, rather than apply all rules at the same time (http://gruntjs.com/configuring-tasks#globbing-patterns), so:
"index.html" > adds index.html
"gwt/**/*" > adds everything under gwt
"!**/*.less" > removes all less files from the current copy list, that is less files under gwt
"!**/*.scss" > idem
"modules//*" > adds everything under modules **including less and scss files
...
So you need to change your order if you want to prevent all less and scss from being copied:
src : ["index.html", "gwt/**/*", "modules/**/*", "components/**/*", "resources/**/*", "!**/*.less", "!**/*.scss", "!resources/styles/**"]

gruntjs path filter : exclude files start with _

I use grunt-contrib-jade, and wanted to specify the task for all jade files, except ones starts with an underscore.
current:
jade: {
dist: {
options: {
pretty: true
},
files: [
{
expand: true,
cwd: '/',
dest: '.tmp',
src: '{,basedir/**/}*.jade',
ext: '.html'
}
]
}
},
this compiles all *.jade files within basedir. I want to exclude all jade files within the hierarchy, where the file names start with _
It looks like it may not be specific to jade, but how grunt tasks specified with the filter syntax. So, how to specify below filter, to indicate to exclude files start with _ to be excluded.
'{,basedir/**/}*.jade'
Thanks
You can specify an array of strings for src, and can exclude files with ! at the beginning of the string (see the file object format documentation here):
src: ['{,basedir/**/}*.jade', '!{,basedir/**/}_*.jade']
Hopefully you can get it from there, I'm not terrible familiar with the globbing syntax.

RequireJS Optimizer is not combing files

I am using the following build file and when I build (r.js -o jsbuild/build.js) all the files in the 'script' folder are minified into the 'productionScripts' folder but they are not combined into the config.js file. Therefore I'm still getting the multiple http requests for all the dependencies.
Is there something wrong with my config or am I completely missing something about requireJS?
({
appDir : "../assets/scripts",
baseUrl : "",
dir : "../assets/productionScripts",
optimize: "uglify",
paths: {
config: 'assets/scripts/config'
},
modules: [
{
name: "config"
}
],
mainConfigFile : "../assets/scripts/config.js"
})
Of course once I post I figure it out. I was mixing concepts. My config was saying minify the 'assets/scripts' folder and that's what it was doing.
I updated the script to just minify the main file. In this case 'assets/scripts/config.js' and that's when it combines dependencies. See appropriate config below. The key is to not use 'dir', 'appDir', and 'modules', this is specific to minifying the folder. Use 'out' to specify where dependencies will be minified and combined.
({
baseUrl : "../assets/scripts",
optimize: "uglify",
name: 'config',
mainConfigFile : "../assets/scripts/config.js",
out: "../assets/productionScripts/config.js"
})

Compile less files with grunt-contrib-less won't work

I'm using Grunt for building my web project. I installed grunt-contrib-less package und added a task to my grunt.initConfig({..});
less : {
options: {
paths: ['js/base']
},
files: {
'js/base/*.css' : 'js/base/*.less'
}
}
when I run the target less via grunt less, it runs without errors but doesn't compile the less file to a css file.
Running "less:files" (less) task
Done, without errors.
I have installed the lessc package via node, too. Doing lessc <source> <dest> works fine.
Currently I have pointed with the files option directly to one dir which contains one less file for testing. Even if I write the whole file name into files option, it happens nothing...
Later on I want to scan the whole js directory and compile all new modified *.less files.
I have installed following versions:
grunt-cli v0.1.6
grunt v0.4.0
node v0.8.7
npm 1.1.49
BR,
mybecks
The glob pattern js/base/*.css does not match any files, therefore there is no destination. Usually, tasks like this expect multiple inputs to combine into a single output. Also, bear in mind that less is a multi-task, and putting files as a child of less is not doing what you expect. (it is treating it as a target, not a src/dest map)
If you want a 1-1 transform of .less into .css, you can use dynamic expansion. (or you can define each src/dest pair manually, but who wants to do that?)
In your case:
less: {
options: {
paths: ['js/base']
},
// target name
src: {
// no need for files, the config below should work
expand: true,
cwd: "js/base",
src: "*.less",
ext: ".css"
}
}
I used Anthonies solution but stil had an error
Warning: Object true has no method indexOf
If I changed the order putting expand true as second it gave me the error
Unable to read "less" file
where "less" was the value of the first item in my list.
I solved it by changing files into an array like this:
less: {
options: {
paths: ["js/base"]
},
files: [{
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}]
},
I used "grunt-contrib-less" : "^0.11.0"
This works for me, but modified to reflect this scenario:
less: {
options: {
paths: ["js/base"]
},
files: {
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}
},

Resources