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,
Related
I have a project that uses gulp and I need to use splide js to create a slider, i used NPM to install splidejs and now I need to include splidejs CSS file to my main.scss however whatevere I do to get to node_modules file from my main.scss is not working. In webpack we use ~to get to node_modules but how can i do it in gulp to get there?
I have tried with ~ and with node_modules path and directory in project but nothing works
In Gulp, you can use the gulp.src() function to specify a file path that includes the node_modules directory. This function allows you to specify the source files that you want to include in your Gulp task.
For example, if you want to include all the JavaScript files in the node_modules directory in a Gulp task, you could use the following code:
gulp.src('node_modules/**/*.js')
.pipe(someGulpPlugin())
.pipe(gulp.dest('dist'));
This will include all the JavaScript files in the node_modules directory and its subdirectories in the Gulp task. The ** wildcard indicates that all subdirectories should be included, and the *.js pattern indicates that only JavaScript files should be included.
You can also use other file globs or patterns to specify the specific files that you want to include in your Gulp task. For more information on using file globs with Gulp, you can refer to the Gulp documentation.
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 would like to add my own css file into a Jhipster project.
I put those files in src\main\webapp\assets\styles\
The gruntfile.js should be able to add those files into the depencies am I right ?
But they added ... any idea why ?
Thanks
Yes if you put a file into this directory, it will belong to your project (that's kind of obvious, as it's the CSS folder of your project).
I guess that what you want to do is use this file inside your index.html file. The normal grunt wiredep command works only if you use Bower, which is our JavaScript/CSS dependency package manager. In your case, you are just adding the file manually, so you are not using Bower: just add your file inside the index.html file, as would do in a normal project, outside of the Bower tags, and you will be able to use it.
I'm using the NodeJS implementation of KSS. I have the following file structure:
sass (.scss files)
css (compiled .css files)
images (images & sprites)
styleguide (auto-generated styleguide html)
|- public (auto-generated assets)
|- template (styleguide template files)
I can successfully generate a styleguide by executing the following command line instruction:
kss-node sass styleguide --css css/styles.css --template styleguide/template
So sass is my source folder to parse, styleguide is the destination folder and the --css and --template options tell the compiler where to find my main css file and template respectively. During the process the contents of the css/styles.css file is copied over to styleguide/public/style.css which is then referenced by the styleguide. This is all great.
However, the css file that is generated and referenced by the styleguide now sits in a different folder structure from the original css file (it is two deep from the root instead of one) and therefore any references to the images folder are now invalid. Is there a way to resolve this without placing my original css files in another folder in the css directory to mimic the styleguide folder structure (which would be a massive hack)?
Also, any other references to images in the normal html markup (derived from the scss comments) will have to be adapted to reference the adjusted folder structure, and therefore is not indicative of a real life implementation of my code. Is there a way to resolve this too?
Thanks
I know it's not a solution per se, but what I ended up doing was a Grunt task to copy my images (even the generated by Compass) to the public folder of the generated styleguide after the KSS parsing (also done with Grunt).
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.