I'm Trying to set up my front-end build system with brunch but have an annoying issue that whatever I do brunch ignores bower_components folder and doesn't process anything in it.
this is my brunch-config.coffee file
module.exports = config:
files:
javascripts:
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^bower_components/
order:
before: [
'bower_components/angular/angular.js'
]
stylesheets:
joinTo:
'css/app.css'
paths:
'public': 'build'
modules:
definition: false
wrapper: false
plugins:
assetsmanager:
copyTo: '':['app/pages',
'app/background.js',
'app/manifest.json']
So js/app.js file always gets sucessfully compiled but vendor.js file is not there. Any Idea?
After I wrote my comment on the original question I figured it out and it was because I had my bower.json-file inside the bower_components-folder but it has to be in the same directory as the brunch-config.js|coffee-file is in.
So the directory-structure should look like this:
directory
- bower_components/
- app/
- bower.json
- brunch-config.js
Try to remove your dependencies on the bower.json from top to bottom. When you catch this dependency try to use read-components. That's worked for me.
Related
Does anyone know how to change the "dist" folder for Zurb 6 to be the top level of the site, i.e. so the output would be the same level as "src"?
In config.yml I have tried changing "dist" to "" but am not sure what else to try.
Thanks in advance
Reference Zurb Foundation 6:
File: config.yml
PATHS:
dist: "dist" // change this to new folder ROOT "./"
IMPORTANT:
File: gulpfile.babel.js
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
So if you change to the PATHS.dist to ./ it will actually delete the whole project.
You DO NOT NEED to access ./src FROM dist/ as the ./src gets compiled to ./dist/assets.
Hope it helps
I'm not sure if i understand your question correctly. But you can use the standard unix format to go up one level.
So change in your config.yml file:
dist: "dist"
to
dist: "../dist"
Using Brunch as my build-tool for a front-end prototype, I am having difficulty setting up the UnCSS-plugin. I installed the Bootstrap 4-skeleton for a quick setup, and apart from UnCSS everything is running smoothly.
The error I get on brunch build --production is error: UnCSS: no stylesheets found. I configured the plugins like this:
plugins:
sass:
options:
includePaths: [
'bower_components/bootstrap/scss'
]
postcss:
processors: [
require('autoprefixer')
]
babel:
ignore: [
/^(bower_components|vendor)/
]
uncss:
options:
csspath: 'css/app.css'
htmlroot: 'public'
files: ['index.html']
The source files for the project are located in app: index.html in app/assets, main.scss (imports Bootstrap) and styles.css in app/stylesheets, and app.js in app/javascripts.
Brunch builds this to a folder named public, with styles in public/css/app.css and content in public/index.html. The question is, what is incorrect about the configuration of UnCSS? My understanding of it is that it works on the CSS output from the build, in which case the paths seem correct.
There is a question on SO from 2014 asking pretty much the same thing, but it was never answered.
I had not considered looking at the GitHub issues, wherein one specifically addressed this. In essence, as suggested by #1951FDG:
plugins:
uncss:
options:
ignore: [/\.\bactive\b/]
ignoreSheets: [/fonts.googleapis/]
files: ['public/index.html']
ignore: sample regex to ignore '.active' class
ignoreSheets: sample regex to ignore Google fonts
More importantly, this invocation of UnCSS reads the stylesheets linked in index.html to find the correct CSS-file, then processes it.
file structure
assets/js/
- build/
- plugin/
jquery.min.js
- src/
index.js
config.js
builds.js
require.js
assets/js/src/index.js
requirejs(['jquery']);
assets/js/config.js
requirejs.config({
baseUrl: './',
paths: {
jquery: 'plugin/jquery.min'
}
})
If I want to use r.js to optimize the file, just execute r.js -o config.js name=src/index out=build/index.js, the r.js will compile a file into build/index.js with optimization and dependency, but there will be many files need to compile in the future, so I create a builds.js
assets/js/builds.js
({
appDir: 'src',
dir: 'build',
mainConfigFile: 'config.js',
modules: [
{name: 'index'}
]
})
If I run r.js -o builds.js, I will got wrong path message.
Error: Error: ENOENT: no such file or directory, open 'D:\www\r\build\plugin\jquery.min.js'
I need to go back to config.js, and edit the path relative to src.
requirejs.config({
baseUrl: './',
paths: {
jquery: '../plugin/jquery.min'
}
})
It will work, but is it possible to write one config file for both purpose?
Specify paths again in the build file, relative to /src.
builds.js
({
appDir: 'src',
baseUrl: './',
dir: 'build',
modules: [
{name: 'index'}
],
paths: {
jquery: '../plugin/jquery.min'
}
})
The paths in the build file work differently than in the config file.
The appDir option of /src specifies that all your scripts are located in /src, however your config.js and folder structure have the /plugins outside of /src.
When the jquery path is resolved, the paths in the config.js file are used because the mainConfigFile option is used.
All module paths would need to be redefined in your build file in addition to your config file. This is because all module paths are resolved relative to the baseUrl, which is in relation to the appDir in the build file – this is the confusing bit.
Reference the following r.js example build file. https://github.com/jrburke/r.js/blob/master/build/example.build.js
The official doc on the RequireJS optimizer contains a helpful section about path resolution.
http://requirejs.org/docs/optimization.html#basics
Relative path resolution rules:
In general, if it is a path, it is relative to the build.js file used to hold the build options, or if just using command line arguments, relative to the current working directory. Example of properties that are file paths: appDir, dir, mainConfigFile, out, wrap.startFile, wrap.endFile.
For baseUrl, it is relative to appDir. If no appDir, then baseUrl is relative to the build.js file, or if just using command line arguments, the current working directory.
For paths and packages, they are relative to baseUrl, just as they are for require.js.
I want to use Brunch in a project with this structure:
root/
|-src/
|--assets/
|---js/
|-bower_components/
|--...stuff...
|-dist/
|--...output stuff...
|-bower.json
|-package.json
|-config.coffee
Nevertheless, it seems that Brunch is ignoring anything is outside the "app" directory.
In other world, it does not work:
conventions:
assets: /src\/assets\//
paths:
public: 'dist'
watch: ['src']
files:
javascripts:
joinTo:
'dist/output.js': /^src\/js/
There is an option to set the name of the "app" folder?
My environment: Brunch 1.8.7, Node 0.12.2, Windows 7
Thank you in advance
You're using paths.watch. You should be using paths.watched.
Does anyone know how to configure Brunch not to concatenate javascript files in the local build?
I want the javascript files copied straight over so that I do not have one large javascript file when debugging.
Here's my current brunch-config.coffee file:
exports.config =
conventions: ignored: /.+\.spec\.js/
files:
javascripts:
joinTo:
'js/app.js': /^app/
'js/vendor.js': /^(vendor|bower_components)/
stylesheets:
joinTo:
'css/common.css': /^app/
templates:
joinTo:
'js/templates.js': /^app/
Place your javascript files into app/assets
Remove javascripts and templates from your brunch config.
That should just copy them over as-is.
Per Paul's comment, it is not possible yet to not combine js files when building locally. Thanks Paul