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
Related
So I installed Sass for my project via the CLI npm install -g sass but the CSS that I entered is not displaying. So after creating my style.scss file and entering my code, I compiled it using live sass compiler. As a result, the style.css and style.css.map files appeared (like they should). I then went into my html file and imported it.
Am I importing my CSS file correctly into my HTML file? If you see below, I thought this how it should be done. I am not using any framework for this particular project.
Not sure what to be looking out for when issues like this arise, so any leads are appreciated.
My HTML file
My SASS file
I made a simple create-react-app project as a test assignment for a new job. I'm already finished with the project, but there's a catch:
I must turn the project in as a single html file with embeded js and css.
How do I turn my create-react-app project into a single file?
Edit: Running npm build doesn't solve my issue, as it builds the project, but the result is not a single html file! - it generates an index.html plus a static/ folder to import sources from.
I could hand-paste those I guess, but am looking for a more elegant solution!
Run this command:
npm run build
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've been working on an Aurelia app without gulp and it has gone well. Now I want to use gulp b/c the page loads are terrible with 100+ separate files being requested. I install aurelia-bundler from the skeleton and can get it working using gulp. But there are two problems:
1. I have to gulp bundle after EVERY change to refresh the page
2. The error messages make no sense b/c everything is minified now.
I can deal with #1 b/c of gulp-watch (even though that still takes time), but I can't handle the minified files and not being able to debug my code.
So, is there and easy way to switch back to the non-bundled files for development on my machine and only use the bundled files when I deploy to Heroku server? It seems like aurelia-bundle now points to the dist folder by default.
Oh yeah, I tried modifying config.js to point to "src" instead of "dist" but it still looks for the aurelia-xxx.js file instead of the non-bundled files.
Thanks.
If you are using the latest build files you can gulp watch in dev which should use the src files without bundling - of course, this is slower, but in conjunction with browser-sync you shouldn't have to do loads of refreshes.
Check your paths.js and other config files against the skeleton if gulp watch is also bundling.
I am trying to use Jekyll together with Compass.
On one command line I'm running jekyll --auto and in another one compass watch.
The SASS files are located in /stylesheets and are compiled into /_site/stylesheets.
Jekyll is configured to ignore /stylesheets.
Compiling the stylesheets works fine in the beginning, but everytime I change something that makes Jekyll regenerate the site, it overwrites the whole /_site folder and /_site/stylesheets is gone. Compass doesn't regenerate it since the source SASS files haven't changed.
Is there another way to use Jekyll together with Compass?
Can I configure Jekyll to not overwrite the complete output folder but just the files that changed?
Im using Jekyll & Compass for my github page. here: https://github.com/ardianzzz/ardianzzz.github.com
Simple,
I just put the generated css folder in the root folder. Jekyll will generate the file inside _site folder.
As you can see in my repository.
Just call the CSS with the following code
<link href = "/css/screen.css" ...
bad english, sorry. :)
The issue is that Jekyll, when run, scraps all the contents of the _site directory. The way I got around this was to use rake for deployment, and then have the following in my rakefile:
task :generate => :clear do
sh 'jekyll'
sh 'compass compile'
end
I then just run:
$ rake generate
Which populates the jekyll directory, and then puts the compass files over.
A neater solution might be to make your compass -watch process (assuming that is what you are running) compile the compass to projectdir/css. When you then run jekyll it will just pull that css directory directly into _site/css and you're done, no problems (see below for dir structure).
projectdir/
css/
stylesheets/
If you put anything in _site/css and then run jekyll after it will be removed, so you either need to run compass after, or put the compass files into the css folder in the root directory, and then jekyll will just copy the files correctly.