Started learning Bower and Gulp. I have app directory where I will do my development and a dist directory where the final project will live ready to go out to the world.
In my app directory I have installed chart.js through bower and therefore it is in a folder called bower_components/chart.js.
In my index.html file I have a link to Chart.js as:
<script type="text/javascript" src="bower_components/chart.js/Chart.js"></script>
In my distribution I want this to be in my javascript folder
<script type="text/javascript" src="js/Chart.js"></script>
How do I automate changing the location of the Chart.js file in Gulp?
I imagine this is a general requirement considering your distribution file structure is different to your development file structure.
Related
I learned to do a working environment based bower, from there install yoeman and gulp and materialize, I made a web page to root of all this, now I want to upload a host (like 000webhost or firebase) but I do not know which files are the ones I should upload
thx
You should upload everything except bower_components directory since it's content is used only when you compile down the things using gulp on your local machine. Once all your source files are piped through gulp, they are not required on the destination location. None of those files is or should be used during a http request.
I don't know exactly what is your project's structure, but because you specified what you use (bower, gulp) then I can deduct.
So after gulp finishes it's work, you have a public directory where all your combined, minified and copied assets live. This is obviously needed on the server, in your markup, you should refer to those files, not the ones fetched by bower when you've done bower install library1 --save. bower install library2 --save.
Has anyone rolled gulp into apostrophe for compiling assets? I'd like to use ES6, as I'm using a frontend framework that has all of the js nicely split up into separate assets, and have the compilation of that into one minified file part of the normal apostrophe build process (I'm using apostrophe-assets to reference a single root js file which imports everything else).
Great question. You're going to want to build your JavaScript with Gulp into one file before pushing that file to the browser using Apostrophe's asset pipeline.
For example you might have a /src directory at the root of your project that has your JavaScript files. You can pipe these files into your apostrophe-assets directory or some other named directory that is a subclass of apostrophe-module in /lib/modules/.
You can then push your compiled file to the browser as usual: http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html#configuring-java-script-for-the-browser
With being able to have the bower_component folder outside of the app folder, how would it be possible to load the bower packages to work with gulp? The plan is to use Web Starter Kit that has gulp, browser sync already set up.
I think the set up will be to move the bower modules, with gulp - that has the task to copy the specified modules over to app/scripts/vendors or app/styles/vendors. So it will run two tasks (one for scripts and one for styles).
It will copy it over, and if newer updates were downloaded - replace the existing files. Concat and Minify no matter if serving or building.
Since WSK already builds a main.js, the bower packages will be built into a library.js file. Can someone guide me in the right direction to build this setup?
I've attached a few things I think the setup will need.
app/index.html
<!-- build:js scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<!-- endbuild -->
Build into /dist/scripts/venfors.js
gulpfile.js
// Bower - bower_components directory - located to root folder
var directory = {
bower = './bower_components/'
};
// Bower - Scripts
gulp.task('bower-scripts', function() {
return gulp.src([
// AngularJS
directory.bower+'bower_components/angular/angular.js'
])
.pipe( --- Copy src to /app/scripts/vendor --- )
});
Not sure if there is there is anything more I need to do? Or if my setup is incorrect?
Reason why I want to keep the bower_components folder in the root folder NOT the app folder is to keep everything cleaner.
Brief: Gulp and WSK setup using bower, with bower_components folder outside of "App" folder.
So, I believe this should help others:
What we are doing is copying over the packages over from bower_components folder in the root folder to our app scripts folder.
// Bower - Scripts
gulp.task('bower-scripts', function() {
var directory = { bower : './bower_components/' };
return gulp.src([
directory.bower+'**/*.min.js'
])
// Output Files
.pipe(gulp.dest('app/scripts/vendor'))
});
When we rung gulp serve, we need to add the bower-scripts task as a dependency to our serve task
In index.html, specify the bower package you want to use like so:
<!-- build:js scripts/library.min.js -->
<script src="scripts/vendor/angular/angular.min.js"></script>
<!-- endbuild -->
Than when you run gulp (to build) or gulp serve (to test) - everything should fall into place.
If you can streamline this - or make it more efficient, than drop a line!
I am learning to use node.js.
The site looks fine when run from file:///C:/.../myfolder/index.html
I have my jquery and bootstrap files in the directories myfolder/css/ and myfolder/js.
but when I run node index.js and go to localhost:3000, these css and js files cannot be found.
This is what is in my index.html file:
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
Is there some folder in nodejs that I'm supposed to store these files? Or do I have to put some code in index.js that imports all the css and js files?
You can simply follow the quick start instructions for Express.js here:
https://www.npmjs.org/package/express
Then browse to http://localhost:3000 to test
You can use the Atom text editor or Brackets and place your files under the public folder and reference them.
http://atom.io
http://brackets.io
By default Express uses a template engine called Jade. You can look here to work with that:
http://jade-lang.com/
Using HTML in Express instead of Jade
Node.js + Express without using Jade
Good luck!
Your localhost begins in a specific directory on you machine. If you use Xampp, you must put all your server files in C:\xampp\htdocs\ in order to acces these via your localhost URL. Some other servers use a folder called 'www'.
Find your server root path en put your files there. Or create a symlink from your server root to your files.
Did you require the path module?
var path = require('path');
It's best to create a public directory to store your files in.
public/index.html
public/css/style.css
public/js/scripts.js
The reason that you couldn't get access to localhost:3000/folder/file is that localhost:port is just a virtual port. There is no such directory called localhost:3000/css/ or localhost:3000/js.
To fix this, you need to use express module to configure the root directory from which to serve static assets.
Basically, you need to add the following code:
var express=require('express');
var app=express();
var path=require('path');
app.use(express.static(path.join(__dirname,'public')));
and your static files directory will be currentWorkingDirectory/public/, which contains all of your assets.
In your code, to link any source file,
href='/fileName.extention'
Here is the documentation link express-static-files
I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. All I can find is a single stack overflow question that references the file "all.min.js", which upon a quick search of the unzipped file no longer exists.
I've scoured the internet for the past few hours, and it's looking like it is supposed to be common knowledge! I'm still stuck though.
Which file should I link to in my HTML?
Edit: Just to clarify, I downloaded a large ZIP file off fabric.js's github. I was confused as to which file I should link to to include the library.
A more modern fabric.js hello-world using webpack (state of 2018)
Advantages of this method
fabric.js does not need to be committed to version control
Given that all dependencies are in package.json only two commands are required to get up and running from scratch with your project: git clone <url> and npm install
Updating to the latest fabric version is as easy as running npm update
Not only the fabricjs code, but also your own code will be minified.
and it gives you all other goodies provided by webpack
Assumptions
This assumes...
... that you have the NPM >= 5.2 (if I recall correctly, this is needed by webpack).
... that you have access to a CLI shell to run the npm and webpack commands.
... that the npm binaries are on your path. By default: $HOME/.local/bin on *nix systems
NOTE: You will not need superuser/root access to the system if you already have npm available.
Preparations
First, initialise a new npm project:
mkdir my-fabric-project
cd my-fabric-project
npm init -y
Then install webpack into that folder (we will need this for later):
npm install webpack webpack-cli --save-dev
Also, install fabricjs as this is our dependency for our project:
npm install --save fabric
The two npm install commands above will populate our package.json file containing production (fabricjs) and development (webpack & webpack-cli) dependencies.
NOTE: When installing webpack, I got errors regarding cairo at the time of this writing. But it seems they are harmless. cairo is a graphics library and I assume this is only needed if you want to run fabricjs in a nodejs process. Browsers are already capable of rendering graphics so when running fabricjs in client-side code this is a non-issue. Otherwise you may need to install required headers. I assume (not tested) that this error can be solved by installing the package libcairo-dev on debian-based systems.
The Code
Now we have everything ready to get coding.
Create two folders src and dist, so our source tree becomes:
.
├── node_modules
| ├...
| └── ...
├── dist
├── package-lock.json
├── package.json
└── src
2 directories, 2 files
Create a HTML file index.html inside the dist folder with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #000000;">
</canvas>
<script src="main.js"></script>
</body>
</html>
And also a javascript index.js in the src folder with the following contents:
import {fabric} from 'fabric';
function run() {
let canvas = new fabric.Canvas('myCanvas');
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
run();
This will give us the following directory structure:
.
├── node_modules
| ├...
| └── ...
├── dist
│ └── index.html
├── package-lock.json
├── package.json
└── src
└── index.js
2 directories, 5 files
You may notice that dist/index.html references a file called main.js which does not exist. We need to run webpack to create it:
npx webpack
Your code should now work. Either open dist/index.html manually, or run a mini-web server from the console to test:
(cd dist && python3 -m http.server)
That's it!
This should get you started with your project and also allow you to leverage the power of webpack to easily split your code. Good luck & Have fun!
Good To Know
The filenames dist/main.js and src/index.js are the defaults when running webpack without a config
webpack will create minified code in dist/main.js by default. This is because it runs in "production" mode by default. To change this, create a file named webpack.config.js with the following contents:
module.exports = {
mode: 'development'
};
You can use it running:
npx webpack --config webpack.config.js
All you need to do download the fabric.js from HERE and save it as js file named fabric.js, and create the html file suppose index.html with below content.
To run this example, these both fabric.js and index.html should be into one folder.
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
Option
You can download fabric.js in any format from HERE
Fabric follows a pretty traditional distribution layout.
You want to use files from the dist directory. fabric.js for development work and fabric.min.js for the live site.