Converting from Grunt to Brunch, and I would like to convert my .svg icons in the folder fonts/ to cross-browser compatible webfonts (woff, eot, ttf, etc) but I haven't found such plugins for Brunch.
Something similar like: github.com/sapegin/grunt-webfont
I've been looking at some different approaches, like building my own brunch-plugin and wrapping with an existing library (Font Custom).
Any suggestions on a better approach? Or are there any webfonts-plugins I've missed for Brunch?
I came across this having a similar issue and solved it with a Brunch-referenced plugin: copyfilemon
https://github.com/kasselTrankos/copyfilemon-brunch
$ npm install copyfilemon-brunch
Add this to your Brunch config under "plugins" (I use coffee-script and bower for managing bootstrap):
copyfilemon:
'fonts': 'bower_components/bootstrap/fonts'
This will copy all files from 'bower_components/bootstrap/fonts' into our Brunch configured public directory under the sub-folder 'fonts'.
Note: It will copy the files every time you run/watch Brunch, which should not do any harm other than taking up some resources for a few ms.
Related
I'm using flask-assets and none of the available filters (rjsmin, jsmin, closure_js, uglifyjs, etc.) is able to minify a ES2016 JavaScript file. The minified files yield errors on the browser console (due to bad conversions) or even crash on execution before serving the resources.
Also, I have tried Babel filter from webassets and I it doesn't make any change on the files, they are just served without changes.
I also can't manage to enforce the closure or babel extra_args to customise their operation.
Any tip or recommendation?
Example code:
from flask_assets import Bundle
page_js = Bundle(
'js/code_with_es2016.js',
filters='rjsmin',
output='public/js/code.min.js'
)
You will need to use the babel filter with babel-presets-env. The webassets documentation is a bit behind on the recent developments which is no surprise considering how fast things are moving in the javascript world.
So first you will need to install babel-cli globally:
npm install -g babel-cli
Now you will need to install babel-preset-env locally, so within your project directory do:
npm install --save babel-preset-env
Finally this is how to set up your bundle with flask-assets:
from flask_assets import Bundle, Environment
from webassets.filter import get_filter
assets = Environment()
assets.init_app(app)
babel = get_filter('babel', presets='babel-preset-env')
assets.register('js_all', Bundle(
'js/code_with_es2016.js',
output='public/js/code.min.js',
filters=[babel, 'rjsmin']
))
You can also tell babel where your babel-preset-env is installed by specifying the absolute or relative path to it:
preset_location = './path/to/node_modules/babel-preset-env'
babel = get_filter('babel', presets=preset_location)
assets.register('js_all', Bundle(
'js/code_with_es2016.js',
output='public/js/code.min.js',
filters=[babel, 'rjsmin']
))
And one last thing, and this is only (like) my opinion, I would highly recommend switching over to javascript/node based build process for your frontend assets (you are using babel already!). Depending on what you are developing gulp or webpack can be good candidates to use for your frontend build. Flask-assets/webassets just seem unnecessary because they're lagging behind with docs and package versions of whatever the latest and greatest in the frontend world is.
I am attempting to incorporate createJS into a typescript project (a powerbi visual) that I am building.
I have done the following:
1) Installed createJS and typings file using:
npm install createjs --save and npm install --save #types/createjs
2) Added this line to the the externalJS array in pbiviz.json : "node_modules/createjs/builds/1.0.0/createjs.min.js"
3) Added the path to the typings file to the files array in my tsconfig.ts file:
"node_modules/#types/createjs/index.d.ts".
Something didn't go right, I'm seeing the following error in my console:
This was without actually calling the namespace in my code, if I attempt to use the namespace then it simply breaks my code without any warnings. My IDE's auto-suggest offers createjsimplying to me that it was imported properly but still something isn't right.
I think its related to this thread but I don't understand how to implement the solution it typescript. Can anyone help?
My project structure:
It appears that the issue is an internal issue. I found a solution that I will not pretend to fully understand.
Starting from scratch, instead of installing the createjs package with the --save option I ran
npm install createjs-module --save and
npm install --save #types/createjs
which is apparently a webpack.
After this I "node_modules/createjs-module/createjs.js" in to my externalJS array, as well as the appropriate typings file to my tsconfig.json.
Credit to tsveti_iko
see also:
this
There are 2 methods to import createjs(not createjs specific)
This is what I use in my ts classes. For this you have to set compiler options module to system in tsconfig.json. This is what I use. I seems it's not the recommended one. It like an import statement(or maybe more like an include script)
tsconfig.json:
{
"compilerOptions": {
"module": "system",
.ts files using createjs:
/// <reference path="../lib/createjs.d.ts"/>
The other method is to use import statements along with commonjs. This is the recommended one. I was not able to make it work but didn't try too much because the first method is working.
https://www.typescriptlang.org/docs/handbook/compiler-options.html
I'm trying to build my Electron app with Electron-packager. The problem is my Electron app using node-notifier module. When the packaging, I'm using this command:
electron-packager . MahApp --ignore='node_modules|.sass-cache|src' --platform=darwin --arch=x64
but the problem is that command ignores all node modules. So I edited like this:
electron-packager . MahApp --ignore='node_modules\/(?!node-notifier).+|.sass-cache|src' --platform=darwin --arch=x64
It seems working because only 'node_modules/node-notifier' is inside of resources/app. But it won't work because node-notifier module itself has extra node modules under the node_modules directory like this:
./MahApp/node_modules/node-notifier/node_modules/...
So it didn't work because any dependencies are not exists. My regex in --ignore_path also ignored inside of node_modules in node_notifier. I don't know what should I do now. I tried to specify the relative path like this:
--ignore='./node_modules\/(?!node-notifier).+|...'
but it wasn't work.
Do you actually need the node-notifier module? If not, you can npm uninstall node-notifier --save, or alternatively, put it only in dev-dependencies and run it with --prune option
I have a project that I would like to use foundation 5 with. I have been through the steps of creating a new foundation project using the CLI but I don't like it. There is too many files and the structure does not match what I want. So...
I am intending to add only the required files to my project and use compass to compile all the css.
I have noticed in the project created on the CLI a few things that confuse me and would like some help in clearing them up.
In the project created on the CLI there are two _settings.scss files one under the foundation directory in bower_components and one in MY_PROJECT\scss. I'm assuming that because of this add_import_path "bower_components/foundation/scss" line in the config.rb, which of those files has preference?
Why does MY_PROJECT/stylesheets not have normalize.css (or foundation.css) in it? And how are they not there? (in my custom setup they are being generated, albeit in subdirectories of stylesheets, also the foundation.css that is being generated for me has no settings changes applied so I guess it shouldn't be being generated)
If you take a look inside \bower_components\foundation\scss you'll see the file foundation.scss. That file imports all the stylesheets for all the additional components that come in the Foundation 5 "package." In your root scss directory, the app.scss is what compiles the SASS into \stylesheets\app.css. So rather than this:
#import "foundation";
Uncomment the individual components you'll be using. Something like this:
#import
//"foundation/components/accordion",
//"foundation/components/alert-boxes",
"foundation/components/block-grid",
//"foundation/components/breadcrumbs",
//"foundation/components/button-groups",
//"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
//"foundation/components/dropdown-buttons",
//"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
//"foundation/components/inline-lists",
//"foundation/components/joyride",
//"foundation/components/keystrokes",
//"foundation/components/labels",
//"foundation/components/magellan",
//"foundation/components/orbit",
//"foundation/components/pagination",
//"foundation/components/panels",
//"foundation/components/pricing-tables",
//"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
//"foundation/components/split-buttons",
"foundation/components/sub-nav",
//"foundation/components/switches",
"foundation/components/tables",
//"foundation/components/tabs",
//"foundation/components/thumbs",
//"foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
"foundation/components/offcanvas",
"foundation/components/visibility";
If you'd like to streamline your file structure, I would suggest you remove any scss files from the \bower_components\foundation\scss\foundation\components directory that you will not use. Same with the js directory. You don't actually need to modify anything in the bower_components directory to get everything to work. Not entirely sure why it's all contained within bower_components, but I imagine it's got something to do with being able to update the core components later with future releases.
Someone else could probably give a more educated answer.
p.s. - make sure to compass watch in your CLI to see any of those changes made to your SASS files.
I'm using ember-cli's pod structure to group JS and templates by resource, which is a huge improvement. The last vestige of resource-related logic is the CSS (SCSS) files, which are already broken down along pod-like lines, but still stuck over in app/styles.
My idea is to move the CSS files into each pod, under the name style.css. My question is how to instruct SASS (via #import) directives, and/or Broccoli, to look for the SCSS files within the pods (could be several levels deep) and compile them into appname.css.
Erik Bryn actually just announced his ember-cli addon at EmberConf that does exactly that. Unfortunately it doesn't support CSS preprocessors yet, so until his addon is further along you'll have to make do with the non-pod way of organizing styles...
We create a nice addon ember-cli-sass-pods that uses ember-cli-sass (will install automatically) and lets you to generate and put your style scss files into your pods directories.
for example:
app/login
app/login/route.js
app/login/template.hbs
app/login/style.scss
or a component:
app/components/login-box
app/components/login-box/component.js
app/components/login-box/template.hbs
app/components/login-box/style.scss
Just run
ember g style [path] -p
Enjoy!