I'm currently developing a web-app using node/npm and grunt. I'm new to web-development and come from java development. This is how my prototype's structure looks like:
prototype
|--app
|--index.html
|--index.js
|--dist
|--index.html
|--index.js
|--lib (currently empty)
|--Gruntfile.js
|--package.json
I plan on developing with following structure: My code will be modularized by using npm modules in the lib folder. Those will be included in the index.js. The index.html and index.js files in the app folder will be built for the browser using grunt-browserify and grunt-contrib-copy; results will be put into the dist folder. I also plan on using bootstrap.
In the bootstrap starting-guide, there is written (source), grunt dist would regenerate the dist folder with bootstrap included.
My first question is: How does that happen? I guess you have to place the bootstrap folders somewhere. Or do I need to install some bootstrap related package? In short: How does grunt "know about" bootstrap?
My second question is: How could I include this process in my gruntfile? Right now my gruntfile uses browserify to browserify the index.js and copy to copy the index.html. Those are registered at the goal (is this the right term?) default: grunt.registerTask('default', ['browserify', 'copy', ]);. I'd like to alter this goal by adding the bootstrap magic that happens in grunt dist.
Any help is much appreciated!
The target you are referring to is in bootstraps build environment. You can download this with npm install bootstrap#3 The grunt dist target they are referring too is contained in the downloaded node_modules\bootstrap\Gruntfile.js and is used to compile bootstrap itself for distribution.
grunt.registerTask('dist', ['clean:dist', 'dist-css', 'copy:fonts', 'dist-js']);
The dist target uses several grunt modules like grunt-contrib-htmlmin and grunt-contrib-cssmin and not all may be desired in your setup.
I would suggest taking a look at this file and each of the targets called and modules used for some more guidance on how to proceed.
If you just want to use bootstrap in your project you can download the already compiled and minified libary here and just add them to your project.
Related
I have a js tool that imports a js library I have created. This library relies on there being a file
called "failed.png". I bundle both the package and the library using webpack. If I use the library on its own
then the image is pulled into the dist directory using the file-loader. Thats great and all is well. Then when
I try to import the library from my js tool and it cannot find the image because its now looking in the js tool's
dist directory and not the library's dist directory.
So my ideal solution would be a way to have the library know to look in its own dist directory inside node_modules for its own images.
Failing that then the next best thing would be to pull the images required from within the library's dist directory and put them in the
tool's dist directory.
There is a potential solution here Include assets from webpack bundled npm package but I don't like it because it requires the package to have intimate knowledge of the library it is importing such as where it stores its assets. I'm assuming that other libraries have similar internal dependencies and don't rely on the user modifying there webpack file to get them to work.
Does anyone have any idea how to accomplish this with webpack?
Sorry that I'm not able to define a title that brings my question to a point. But I will try to explain my problem here:
We're using Grunt in our JavaScript projects to compile Sass files to CSS and to browserify and minify our JavaScript modules.
The Sass and JavaScript sources are located in multiple folders (one per app-module) with the following folder structure:
src/
styles/
base.scss
style.scss
js/
module1.js
module2.js
app.js
The Grunt tasks compiles this file into this structure:
dist/
styles/
style.css
js/
app.js
All files under dist are ignored by Git.
When we deploy our application, we create incremental updates which is basically a git diff --name-only to get a list of files that changed.
Here comes my problem: when I deploy the application, I will have to build all JavaScript and Sass files. As the compiled files are outside of Git, I have no clue which of these files have changed (compared to the latest release) or not.
The only solution that comes into my mind is adding the compiled CSS and JavaScript file to Git, too. But then we will have to struggle with merge conflicts in these files.
Any ideas or experiences how to optimize this workflow?
Update 2017-09-19:
I've changed the title to be more accurate as what I was searching for is a workflow to build incremental updates on a JavaScript-project that uses Grunt and Git.
You shouldn't keep compiled files in your repository - it doesn't make any sense to do so. It only causes merge conflicts and makes a mess in commit history. You should track all neccessary source and configuration files, so that anyone can build easily from any point in history. If you do that, then your problem comes down to
git checkout newVersion
<build>
git checkout oldVersion
<build>
diff newBuild oldBuild
Based on the answer by #Dunno, the workflow for creating updates is now as follows:
Incremental updates
Checkout HEAD into temporary directory with the help of git-archive
Build the project with grunt
Checkout the Commit before HEAD (HEAD^) into temporary directory with the help of git-archive
Build the project with grunt
Compare both directories with the help of git-diff --no-index (which allows to compare files in directories without an index)
Store these differences into an archive with the help of tar and gzip, ignore all files in src folders
Full updates
Checkout HEAD into temporary directory with the help of git-archive
Build the project with grunt
Store all project files into an archive with the help of tar and gzip, ignore all files in src folders
The usage of git-diff --no-index was really the life-saver, as neither diff nor rsync were able to report changes in the way I need them.
Possibly a stupid question. I installed Chart.js using package manager. It's in Solution explorer.
But where are the actual JS files or how do I get them? When I installed it, there are no changes that Git detects, so I'm not sure if anything at all happened.
Chart.js 2.5.0 includes a Content\Scripts directory inside its NuGet package which contains a Chart.js and Chart.min.js. Depending on what sort of project you are using these files may or may not be added directly into your project.
If you are using a .NET Framework project that has a packages.config file then the JavaScript files will be added into a Scripts folder into your project.
If you are using a project.json file, or your project uses PackageReferences, then nothing will be added since this sort of project only supports files that are in a contentFiles directory inside the NuGet package. Your project looks like a .NET Core project which will use PackageReferences. The Chart.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.
Tseng's answer that recommends switching to using Bower or the Node Package Manager to add the JavaScript files seems like the best solution here instead of using NuGet, which does not have good support for adding source files to your project for newer project file formats.
The usage of NuGet for css/javascript libraries is discouraged. For ASP.NET Core you should use the java script / node package managers, bower and npm respectively.
You can use either one. Bower is more focused on browser libraries and css, while NPM is more for server-sided stuff (using node.js). But node.js also contains most (if not all) of the packages bower has, so it's matter of preference.#
For that, you need to select your MVC project and add a new file to the project root. While in the template manager (Add->New File...), search for "Bower Configuration File" or "npm Configuration file".
Then edit the file and add your dependency, i.e.
package.json (npm)
{
"dependencies:" {
"chart.js": "2.5.0"
}
}
Once you save, the file will be downloaded in a directory named "node_modules`. This alone won't be enough, as the required files need to be copied over to wwwroot folder, where they can be accessed when the application runs.
For this you'd need either use the bundler to bundle the files together (should be in default ASP.NET Core project template) or use task runners such as Gulp or Grunt to run tasks on build/publishing, which does that for you. See ASP.NET Core Docs on Gulp examples.
Update
Bower been deprecated now for over a year.
I installed Foundation 6 Basic Template with foundation new. All good and ready to go.
I have a local development environment versioned with Git
Foundation comes with a .gitignore file where its ignoring css
folder and bower_components and so on:
.DS_Store
bower_components
node_modules
npm-debug.log
css
I understand using foundation watch, it will compiling scss/app.scss into css/app.css. So now I can track css/app.css with Git and commit it and push it to the staging server. Is this correct?
But what about e.g bower_components folder with necessary JavaScript files. With the Basic Template I'm not compiling any JavaScript, is it? I want to start with a simple template and expand it and build it out if necessary. And track it with Git if possible so I can pull my changes into the staging server. How do I have to use the JavaScript files in my workflow and which JavaScript files to start with a simple template and able to version it with Git?
I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower