I am looking to install "lightbox" via bower and this works fine. I used the "ignoredDependencies" flag with bower to prevent jquery being installed alongside the lightbox as that is taken care of elsewhere.
When it comes to bower_concat I amended the config to read as so:
bower_concat: {
dist: {
dest: "js/bower.js",
cssDest: "css/bower.css",
bowerOptions: {
ignoredDependencies: [
"jquery"
]
}
}
}
and
bower_concat: {
dist: {
dest: "js/bower.js",
cssDest: "css/bower.css",
exclude: [
"jquery"
]
}
}
My intention is to "concat" the bower js without jquery.
But I get the following error:
Fatal error: Component jquery not installed. Try bower install --save jquery
Not sure if this is an actual issue with bower_concat or the way I am configuring this. Am pretty sure that "ignoredDependencies" is only for the actual install of the components but thought I'd give it was with a try here anyway. As it stands, I've had to amend the ".bower.json" file in the component and remove the jquery dependency entirely. I was hoping to avoid amending the component itself and just set it in some config somewhere.
Any help/advice would be appreciated.
Related
In an inherited polymer 1.0 project the setup involves a gruntfile which calls, among other things, bower to install the necessary resources. However, in the later steps, some files cannot be found and the grunt task fails. I am new to both bower and grunt and feeling a little lost.
The file in question that cannot be found is myproject\components\polymer\polymer-mini.html, though there are more in similar positions which I found out by copying the file there by hand.
My first step was to isolate the bower install task and watch it while it was working. This is its configuration in the gruntfile.js:
bower: {
install: {
options: {
targetDir: './components',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: true,
cleanBowerDir: true,
bowerOptions: {}
}
}
}
By pausing the execution after single steps in verbose mode I found the following to happen during installation:
the old myproject/components folder is deleted if it exists
files are created as normal in a myproject/bower_components folder
files are then copied to the targetDir myproject/components
however, not all files seem to arrive there
myproject/bower_components is deleted after copying
Comparing the contents of myproject/bower_components and myproject/components reveals that many files present in the original folder are missing in the target one. For example, the mentioned myproject/components/polymer only contains a polymer.html - however, there are seven files in myproject/bower_components/polymer, including the missing polymer-mini.html.
Apparently, something filters what is copied to the targetDir and what isn't.
Can I influence this in any way or is this setup even correct as it is now? I have seen grunt-bower-task and Polymer but cannot make much of it - except that the accepted solution apparently copies everything by hand after the installation of bower_components. Surely, there must be a better way?
I ended up copying the files independently of the bower task by calling a copy task configured as such:
copy: {
main: {
files: [
{ expand: true, cwd: 'bower_components/', src: ['**'], dest: 'components/', filter: 'isFile' }, // bower components
]
}
}
Of course, in this case the bower task has to be reconfigured not to delete the bower directory from which to copy.
bower: {
install: {
options: {
targetDir: './components',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: true,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
This isn't really what I hoped for but in the meantime it gets the job done.
We are using Grunt to compile and concatenate our typescript files into a single javascript file located in our distribution folder. That functionality is working properly, but Grunt also creates .map and .js files for every ts file it finds; auto-generating them in the same location as the TS files.
Is there a way to prevent grunt from making these extra files and just generate the output.js and output.map?
This is a snip of our grunt.js file.
ts: {
task : {
src: ["**/*.ts", "!node_modules/**/*.ts"],
out: 'app/dist/app.js'
},
options: {
fast: 'never'
}
},
watch: {
typescript: {
files: '**/**/*.ts',
tasks: ['ts']
},
sass: {
files: '**/**/*.scss',
tasks: ['sass']
}
}
In tsconfig.json turn off the compileOnSave option to signal to IDEs not to generate all files for a given configuration upon saving:
{
"compileOnSave": false
}
Not all IDEs currently obey the option. See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more detail.
It seams that your IDE is compiling your TS files.
It happens with me once with webstorm,
Witch IDE are you using?
Try to disable typescript compiler.
In case you are using webstorm:
Ctrl+Alt+S
Search for typescript under Languages & Frameworks
uncheck "Enable TypeScript Compiler" checkbox
Ok, so I've created a new ASP.Net 5/MVC 6 project in Visual Studio 2015 Preview. In keeping with our current method of doing things, for styling I want to use .less files. Creating the files is straightforward, but Web Essentials no longer compiles them.
So my question is this: what precisely do I need to do to get my .css files generated when I save the .less files?
Based on my adventures getting Typescript to work nicely, I will have to use Grunt to accomplish this task, but I am brand-new to Grunt and so I'm not sure how one would do it?
Please help!
With VS 2015 Web Essential is split into multiple extensions you can download
the Web Compiler extension from here and it also has details on how to use it.
It is certainly not elegant as it used to be, but if you are using existing project and want to use a compiler for LESS then this may do the basic job.
So here's how to do it (compile on build and non-elegant compile on save):
Step 1
Open up your package.json file (it's in the root of your project) and add these lines:
"grunt-contrib-less": "^1.0.0",
"less": "^2.1.2"
Obviously you can change the version numbers (you'll get helpful intellisense), these are just the current versions.
Step 2
Right-click on the NPM folder (under Dependencies) and click Restore Packages. This will install less and grunt-contrib-less.
Step 3
Once those packages are restored, go to your gruntfile.js file (again, in the root of the project). Here, you'll need to add the following section to grunt.initConfig
less: {
development: {
options: {
paths: ["importfolder"]
},
files: {
"wwwroot/destinationfolder/destinationfilename.css": "sourcefolder/sourcefile.less"
}
}
}
You'll also need to add this line near the end of gruntfile.js:
grunt.loadNpmTasks("grunt-contrib-less");
Step 4
Then just go to View->Other Windows->Task Runner Explorer in the menu hit the refresh icon/button, then right-click on less under Tasks and go to Bindings and tick After Build.
Hooray, now less files will compile and we (I) learned about grunt, which seems really powerful.
Step 5: Compiling on save
I still haven't got this working to my satisfaction, but here's what I've got so far:
As above, add another NPM package grunt-contrib-watch (add to package.json, then restore packages).
Then add a watch section in gruntfile.js, like this (obviously this can work for other types of files as well):
watch: {
less: {
files: ["sourcefolder/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
}
So you'll now have something like this in your gruntfile.js:
/// <binding AfterBuild='typescript' />
// This file in the main entry point for defining grunt tasks and using grunt plugins.
// Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
watch: {
less: {
files: ["less/*.less"],
tasks: ["less"],
options: {
livereload: true
}
}
},
less: {
development: {
options: {
paths: ["less"]
},
files: {
"wwwroot/css/style.css": "less/style.less"
}
}
}
});
// This command registers the default task which will install bower packages into wwwroot/lib
grunt.registerTask("default", ["bower:install"]);
// The following line loads the grunt plugins.
// This line needs to be at the end of this this file.
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-contrib-watch");
};
One can then simply set this task to run on Project Open (right-click on watch under Tasks in the Task Runner Explorer (it's under View->Other Windows in the top menu) and you're done. I would expect you'd have to close and re-open the project/solution to get this to kick in, otherwise you can manually run the task.
(Note: there is now a new question asked here directly concerning sass. I tried to alter the question and tags in this question to include sass, but someone didn't allow it.)
I would like to add the answer to the same question for sass (.scss). The answer is so related I think these may best be combined as two answers in this same post (if you disagree, please let me know; else, we might add "or sass" in the post title?). As such, see Maverick's answer for some fuller details, here's the nutshell for sass:
(Pre-step for Empty Projects)
If you started with an empty project, first add Grunt and Bower:
Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)
package.json:
"devDependencies": {
"grunt": "^0.4.5",
"grunt-bower-task": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.9.2"
}
(FYI: grunt-contrib-sass link)
Then:
Dependencies -> right-click NPM -> Restore Packages.
gruntfile.js
1) Add or make sure these three lines are registered near the bottom (as NPM tasks):
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");
2) Again in gruntfile.js, add init configurations, something like the following.
{ Caveat: I am no expert on such configurations. I found the sass configuration on an excellent blog post some time ago that I can't locate at this time in order to give credit. The key was I wanted to find all files in the project within a certain folder (plus descendants). The following does that (notice "someSourceFolder/**/*.scss", and see important related note here). }
// ... after bower in grunt.initConfig ...
"default": {
"files": [
{
"expand": true,
"src": [ "someSourceFolder/**/*.scss" ],
"dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
"ext": ".css"
}
]
},
"watch": {
"sass": {
"files": [ "someSourceFolder/**/*.scss" ],
"tasks": [ "sass" ],
"options": {
"livereload": true
}
}
}
Now follow the instructions for Task Runner Explorer as given in the other answer. Make sure to close and reopen project. It seems you have to run (double click) 'watch' (under 'Tasks') every time the project is started to get the watch watching, but then it works on subsequent saves.
I am writing my first Yeoman generator. For the index.html page I am referencing the hosted jQuery file on Google with a local fallback. I am using Bower to fetch the latest version of jQuery. Therefore currently my jQuery reference looks like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/bower_components/jquery/jquery.min.js"><\/script>')</script>
This is not ideal as every time this generator is used, the user would have to check which jQuery version Bower fetched, then update the version section in the hosted link with the same version number.
Is there a way to automatically fetch the version number and update the hosted url, presumably using Grunt?
Note: I am not looking for the link for the latest hosted version and I don't want to specify which jQuery version for Bower to fetch as I want it to be the most recent at the time of creation.
Yes, have a look at grunt-replace. Here's a sample config that would replace the link:
replace: {
options: {
patterns: [{
match: '/#jQueryCDN/g',
replacement: function() {
var jQconf = grunt.file.readJSON('bower_components/jquery/bower.json');
return '//ajax.googleapis.com/ajax/libs/jquery/' + jQconf.version + '/jquery.min.js'
},
expression: true
}]
},
files: {
src: 'static/index.html',
dest: 'build/index.html'
}
}
Then just use #jQueryCDN where you want the path to be inserted. :)
With Symfony 2.0.x I store all my client side dependencies (jQuery, etc) in the deps file so I can easily update them all at once with vendor/install, with the switch to composer in 2.1 this is not possible. My options appear to be:
Fork all repos and add in the composer.json file (pain in the butt and waste of time)
Manually download them all and stick them inside my repo somewhere (also a pain in the butt)
Write my own Grunt script or something similar
Does anyone have a solution for handling this, or am I going about it all wrong?
Composer does have support for downloading libraries that are not Composer-aware. It's a little more work, but you can define each of your dependencies like this:
{
"repositories": [
{
"type": "package",
"package": {
"name": "jquery/jquery",
"version": "1.8.1",
"dist": {
"url": "http://code.jquery.com/jquery-1.8.1.min.js",
"type": "file"
}
}
}
],
"require": {
"jquery/jquery": "1.8.1"
}
}
Read more about it here: http://getcomposer.org/doc/05-repositories.md#package-2.
This will download jQuery to vendors/jquery/jquery by default. I don't think there's a way to specify a directory outside of vendors at the moment, so that may considerably limit the usefulness of this suggestion.
FWIW, I would consider submitting a pull request/issue to the Composer Github project. This actually would make a whole lot of sense.