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.
Related
I have a privately built dependency that is compiled down to commonjs in my project.
Within the dependency itself, it references a file in my project, a vue file. After building with webpack, and using ssr, it seems to have an issue. It fails to load the vue file.
For clarity, folder structure:
node_modules
|
|- dependency
|
|-main.js
src
|
|-pages
|
|-Default.vue
dist
|
|-compiledcode.js <- what webpack compiles
Now in main.js of the dependency, I have const vuefile = require('../../src/pages/Default.vue')
The error as displayed by Node once hosting it via ssr:
<template>
^
SyntaxError: Unexpected token '<'
In my webpack i have the following:
module.exports = {
...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
...
]
},
plugins: [
new VueLoaderPlugin()
...
]
}
From how I am understanding the error is that vue-loader isn't loading in the file. But I don't even know this is possible to begin with. If there can be clarification on this.
If not possible ..
Is it possible to then add a webconfig to the dependency and make it work that way? If so, how do I get my webpack to interact with the dependencies webpack.
Thanks.
can you please show your whole config?
set webpack resolve (incl extension resolve)
is vue included in main.js? (import vue..)
setup alias to prevent paths like '../../src/pages/..'
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.
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.
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
I have this build.js file:
({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
{
name: 'main'
}
]
})
And in my index.html I have:
<script data-main="js/main" src="js/lib/require/require.js"></script>
When I optimize the application using:
node r.js -o build.js
All the app directory is copies into dist directory. This method is really convenient since I don't need to do any changes and I can deploy the project immediately after the optimization.
The problem is that my code uses require.js which cause overhead. How can I integrate Almond? I still with the app directory will be copied into dist directory but I don't want to edit my index.html after each optimization call.
Is there a way to integrate almond?