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!
Related
I have a php project and I use composer for php libraries and npm/gulp for CoreUI.
CoreUI doesn't have TinyMce so I installed it with npm. The files are now inside node_modules folders, but I think they should be moved outside.
I have 2 options:
use composer to set up TinyMce anywhere I want, probably
use gulp to move/copy outside node_modules
I believe the recommended solution is to copy with gulp but I am not sure how, which files and where.
How do I copy with gulp?
tried without success
gulp.task('copy', function () {
gulp.src('./node_modules/tinymce')
.pipe(gulp.dest('./src/vendors/'));
});
Where should I copy eg. src/vendors/?
Thank you
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.
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.
I currently have a file structure like this
SASS
gulpfile.js
node_modules
sites
example-site
scss
css
example-site-two
scss
css
example-site-three
scss
css
I have gulp installed in the main parent SASS folder with a task 'sass-all' that can go through every single sites scss folder and compile it into css.
I'm trying to write a new task called 'sass-single' which can be run from any of the example-site folders. So let's say I'm in the folder "example-site-two", I want to be able to cmd and do 'gulp sass-single' and ONLY have it compile the SASS in this site. Same thing for a watch-single task I'd like to setup.
Problem is whenever I run this task from a site folder, it changes my working directory up to the parent SASS folder. I don't want to have 100 different tasks for every different site, I'd prefer to just have one 'sass-single' task thats smart enough to only compile the files from the folder I was in when I ran the script.
current Gulp task attempt
gulp.task('sass-single', function () {
process.chdir('./');
// Where are the SCSS files?
var input = './scss/*.scss';
// Where do you want to save the compiles CSS file?
var output = './css';
return gulp
.src(input)
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest(output));
});
However this goes back to the main SASS folder and then just does nothing.
How would I go about modifying this to be able to run from any site folder and have it only do it for that site?
If you want to change the current working directory (CWD) back to the directory where you invoked gulp then this won't work:
process.chdir('./');
That's a relative path. Relative paths are relative to the CWD. But by the time you execute process.chdir('./') Gulp has already changed the CWD to the directory where your Gulpfile.js is located. So you're just changing the CWD to ... the CWD.
You could explicitly pass a CWD to gulp on the command line:
SASS/sites/example-site> gulp --cwd .
But that would get annoying pretty quickly.
Luckily for you Gulp stores the original CWD in process.env.INIT_CWD before changing it. So you can use the following in your task to change the CWD back to the original:
process.chdir(process.env.INIT_CWD);
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.