Most packages nowadays are available in both NPM and Bower. I have to have NPM around, but I'd like cut Bower out of the loop on my project.
I'm currently relying on grunt-wiredep to create <script> includes in my index.html. This tool looks at all of the Bower configs to pull all the necessary js and css files into my index.html for me.
Is there a tool that will do the same for NPM dependencies?
You would be able to do that using a module bundler like Browserify or Webpack.
For getting started with Browserify , you will need to first install it via NPM globally
npm install -g browserify
Then in your project , get the frontend library you want to include , like for example the angular library
npm install --save angular
Now you will need to use require() to make Browserify aware of the dependencies that it needs to fetch for the project to work (In case of Angular app, where you define the main module , add this first line)
var angular = require('angular');
angular
.module('autocompleteDemo', [])
.controller('DemoCtrl', DemoCtrl);
For setting up the grunt-browserify task , first install it in the project
npm install grunt-browserify --save-dev
and configure the task as follows
browserify: {
main: {
src: 'entry.js',
dest: 'bundle.js'
}
}
Lastly in your index.html , you will need to add markup for the bundle.js script
<script src="bundle.js"></script>
Example code can be found at https://github.com/pra85/grunt-browserify-example
Related
I have a Symfony3 project and want to use SASS for my stylesheets.
I have looked up many pages and found Assetic related threads - but no "real" explanation, how to integrate SASS in a Symfony3 project.
Can't be too difficult, can it?
I would be glad to hear any hint or complete "how to" - thanks a bunch!
I create a separate frontend build process using NPM for this which can handle all images, SASS/CSS, and JS with compression etc. and then add a build step to generate everything.
If you don't have NPM, follow instructions to install: https://www.npmjs.com/get-npm
Initialise the project by running npm init in your project directory.
Install some tools for compiling and compressing:
npm install node-sass --save-dev this compiles SASS to CSS
npm install postcss-cli --save-dev this processes compiled CSS
npm install cssnano --save-dev this minifies CSS and is used as a plugin for postcss
npm install autoprefixer --save-dev this adds moz, webkit and vendor prefixes and is used as a plugin for postcss
npm install npm-run-all --save-dev this isn't strictly necessary but allows you to group commands which is helpful as you add more steps.
Once you've got these dependencies installed, you can add your build scripts. Open package.json and modify the scripts key.
{
"name": "your-project-name",
...
"scripts": {
"build-task:scss-compile": "node-sass --source-map true app/Resources/sass/app.sass -o web/css",
"build-task:css-minify": "postcss web/css/app.css --use cssnano autoprefixer -d web/css",
"build": "npm-run-all -p build-task:*"
},
...
}
You can now run npm run build. build-task:scss-compile will compile your SASS into a single, uncompressed CSS file in the web/css directory which can be linked to in your templates. Then build-task:css-minify will compress it and add any vendor prefixes to the CSS.
You can add more build tasks as mentioned above and chain them in this way. You can also add file watchers and a watch command which will run the build scripts when any watched files are modified.
Don't forget to add node_modules to your .gitignore file.
The reason I opt for a separate process over something like Assetic and leafo/scss as outlined in the Symfony docs is that Assetic filters add a lot of overhead to responses as they compress things on the fly which will slow down development considerably. It also separates concerns between application and presentation and gives you more flexibility to later build on and adapt your front end without touching your application.
EDIT: Here is a gist of a package.json file that will also copy jQuery, FontAwesome, anything in the assets directory including any images or fonts, compile and minify JavaScripts, after checking them for errors and create required directories if they don't already exist and a file watcher for building when files are modified:
https://gist.github.com/matt-halliday/6b9a3a015b7a87c5b165ce1a9ae19c9b
I am installing bootstrap and jquery with npm. I want only ( not the sass files ) the jquery and bootstrap files to be installed in web/vendor and not in node_submodules/... Is that possible?
So my symfony structure looks like this
app
bin
composer.json
composer.lock
Gruntfile.js
node_modules
- bootstrap and jquery files are here <<
package.json
src
tests
var
vendor
web
- vendor
- I want my bootstrap and jquery files here <<
Or should I just download bootstrap and jquery and place them myself in web/vendor and forget about node_modules.
See npm local install package to custom location.
Using your approach is fine for a small project, but if you plan on building a more ambitious application, you should really look into using a build tool like webpack, gulp, or grunt. Then you can package up your javascript dependencies from your node_modules into a single file and have it generated into your public js folder.
I'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!
I'm trying to get Polymer 0.9 working with Meteor however Meteor is spitting out:
While building the application:
bower_components/polymer/polymer-micro.html:9: bad formatting in HTML template
bower_components/polymer/polymer-mini.html:9: bad formatting in HTML template
bower_components/polymer/polymer.html:17: bad formatting in HTML template
=> Your application has errors. Waiting for file change.
Is there any way to resolve the issue?
You should place the components in public/ at the root of your project.
I've had the same problems. I can't tell if you're using vulcanize, but I assume so.
What fixed me was:
Install Bower: npm install -g bower (bower.org)
Create a file in the root of the project called .bowerrc
Then, you want to tell bower where to install polymer components.
In that .bowerrc put:
{
"directory": "public/bower_components"
}
Now, use bower to install polymer
bower install --save Polymer/polymer#^1.2.0
If you're using other parts of polymer like paper and iron, you'll repeat the bower install step for those as well.
Then attempt starting up meteor again.
I'm using Bower, and already installed Font Awesome with it, but now I'm wondering if I can install a custom font (to be more specific: Raleway and Montserrat) using Bower. Can I do that?
I did some research but I didn't find any solution! If it is possible, please tell me how.
The best solution I found with Bower was the Google Fonts Bower Proxy (source on Github). You will have to first get the query string by going to Google fonts.
<link href='http://fonts.googleapis.com/css**?family=fontname:size**' rel='stylesheet' type='text/css'>
Then using Bower:
bower install --save https://google-fonts.azurewebsites.net/googleFonts/yourPackageName?family=fontname:size
Depending on the requirement, it may be actually easier to simply import the font to your CSS or SASS instead of going for the bower based solution.
There is also a google fonts bower package which includes all fonts.
Raleway is included in the bower package TypoPRO.
Install it with
bower install --save typopro
As you are new to bower, here some further tips:
As the bower_components directory is usually excluded from version control, you can copy the files you need to another directory with a grunt task.
Add a exportsOverride section to bower.json:
{
(…)
"dependencies": {
"typopro": …
},
"exportsOverride": {
"typopro": {
"fonts": "web/TypoPRO-Raleway/*"
}
}
(…)
}
Install grunt
$ npm install -g grunt-cli
$ npm install --save-dev grunt
$ npm install --save-dev grunt-bower-task
and create Gruntfile.js:
module.exports = function(grunt) {
var path = require('path');
grunt.initConfig({
bower: {
install: {
options: {
targetDir: 'vendor',
cleanTargetDir: true,
layout: function(type, component, source) {
return type;
}
}
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-bower-task');
// Default task.
grunt.registerTask('default', ['bower:install']);
};
The grunt task bower:install will run bower install and copy all files from web/TypoPRO-Raleway to vendor/fonts (vendor from targetDir in Gruntfile.js and fonts from exportsOverride in bower.json). You can execute the task with
$ grunt bower:install
As bower:install is registered as a default task, you can also use the short cut:
$ grunt
What you could do, instead of managing it with bower, is add in google code directly into your CSS or SCSS #import url(http://fonts.googleapis.com/css?family=Raleway) or manually add the font by first downloading the font then adding the relative path into your css.
You can download raleway here http://www.google.com/fonts#UsePlace:use/Collection:Raleway, clicking on the down arrow on the top right of the page, unzipping and add the fonts to your site.
Another solution would be to use grunt instead of bower to manage your fonts. I found two grunt plugins which download fonts from Google for you.
grunt-local-googlefont and grunt-goog-webfont-dl. You can install them via npm.
There are lots of different plugins to download fonts from other sources. Just search for font at grunt's plugin search.