I am using Grunt's ['processhtml', 'uglify', 'concat', 'htmlmin', 'cssmin'] plugins to automate my web development. Works great. My question is regarding required directories. I currently have
source/
/includes
header.html
footer.html
index.html
about.html
staging/
(this gets auto populated by grunt with built prettified source files
public/
(this gets auto populated by grunt with uglified production ready code
Do I need a staging folder? Is this normal/standard usage? Or, can I / should I place prettified built out files straight in the public folder and then have the uglify task source AND destination be the public folder? Hope my question makes sense.
Thanks in advance.
Related
I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:
resources > assets > vendor
This is a screenshot:
Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.
I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.
This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY
You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.
If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:
Gulp/Elixer installation and setup
In your gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'app.less',
'normalize.less',
'some-other-less.less',
'and-another.less'
]);
mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');
});
While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.
If you don't want to listen, you can just run the gulp command for a single once-off task run.
The docs are pretty straight forward and can be found here:
Gulp/Elixer docs
I am currently in the process of writing my first Node.js app. I recently installed bootstrap via the npm (following instructions on bootstrap's web site) and was wondering the "standard" way of referencing the bootstap.min.css (and other files of interest). It is best to use grunt/gulp to copy (bundle and minify) the resources I need into my project structure?
Any help would be appreciated.
I was able to copy with the node_modules bootstrap resources with a simple Grunt task:
copy: {
bootstrapSrcCss: {
src: "./node_modules/bootstrap/dist/css/bootstrap.css",
dest: "./public/src/css/bootstrap.css"
},
bootstrapSrcJs: {
src: "./node_modules/bootstrap/dist/js/bootstrap.js",
dest: "./public/src/js/bootstrap.js"
}
}
Using grunt plug-in: grunt-contrib-copy
As explained in This Blog Post, you can create a "Static Route" instead of exposing the node_modules structure totally.
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
But that may not be the best method. It seems that packages that come with resources also come with Grunt files as well.
I want to run grunt on several projects simultaneously. However i'm not sure how to setup so it works. Here's what my setup looks like:
- Project 1 folder
-[project files]
-Gruntfile
- Project 2 folder
-[project files]
-Gruntfile
- Grunt Folder
-[nodeModules]
-package.json
So the idea is that have all grunt dependencies (node modules) in a single centralised folder. Then each project folder has its own Gruntfile.
The problem I have is that I don't know how to setup the gruntFile so that it can use the node modules and package.json from the grunt dependancy folder.
Can anyone help me with how I can get this to work? Specifically with code examples.
Using the webapp generator, I have created a yeoman project. I have some html templates in the app folder in a 'templates' directory. I am able to get these files revved when running grunt build; however, I am not able to update to references to the html templates in the js files in the 'scripts' directory. Is it possible to use the usemin task on js files or is it a bad idea to rev html templates used by js files in the first place?
Before building:
-root
-app
index.html
-templates
template1.html
-scripts
script1.js (used template1.html)
After building:
-root
index.html
-templates
43643.template1.html
-scripts
345345.script1.js (does not update ref to template1.html)
My gruntfile is pretty basic, just added directories to the rev task. Any suggestions would be appreciated. Thanks in advance.
you can use patterns like in the following question: Using grunt-usemin with dynamically generated image paths
I used this to search revisoned js files into other js files.
When you do this, bear in mind that you have to write all relative path in the, in my case I had to change something like:
...
var file = basePath + 'filename.js';
...
to
...
var file = 'base/path/filename.js';
...
Cheers,
i want to have a directory that is not deployed to the server, nor is it packaged to be sent to the clients.
I read the 'tests' dir behaves this way, but i don't want to store all my files that don't nee deployment in the tests dir. tests is just for tests...
I want to include my sass files (.scss) in my project, but only the compiled css needs to be deployed (I compile to client/style.css). All of the sass source files and compass configuration files don't need to be deployed anywhere.
How to do this?
I hope I don't need to stor everything in the tests dir...
Thanks!
Pieter
As stated in this other SO, directories whose name start with a dot (Unix hidden directories) aren't included by meteor. I use it for my less partials: client/css/.partials/_<partial_name>.less.
You could modify Meteor's app/lib/bundler.js, line 37 to include your extension:
var ignore_files = [
/~$/, /^\.#/, /^#.*#$/,
/^\.DS_Store$/, /^ehthumbs\.db$/, /^Icon.$/, /^Thumbs\.db$/,
/^\.meteor$/, /* avoids scanning N^2 files when bundling all packages */
/^\.git$/, /* often has too many files to watch */
/*.scss$/
];
or you could make package.js for your sass files, using stylus as an example.