I thought that when I moved .js files within a directory that grunt-usemin would update the .js files listed within the <!-- build:js({.tmp,app}) scripts/scripts.js --> blocks, but that doesn't seem to be the case.
I'm using the default Yeoman setup and haven't made any changes to the Gruntfile.js
I've tried grunt clean, but it seems to be only looking at the /dist folder.
The grunt-usemin configuration only specifies where to find HTML files that should be scanned for <!-- build:... --> blocks. Usemin does not track the javascript (or css) files you want concatenated and uglified.
The .tmp folder is used for files that are in-flight to the distribution location.
If you are moving files around, you also need to edit the build:js blocks accordingly or look at the second link, below:
can grunt automatically include all my js in index.html? - does not apply to usemin but is background for the next link
How to include scripts automatically in a yeoman/grunt project? - a little extra work, but if you can define a pattern/glob for your scripts you can use this answer to generate the build.js block content before usemin kicks in and does its work.
What is “{.tmp,app} ” in Yeoman generator?
grunt-usemin docs - GitHub docs, not the greatest, but the more you use and configure the plugin the more it makes sense.
Related
I have a multi page application using webpack's entry points.
When deploying the page via Netlify, this vendors chunk stylesheet is outputting to the page:
<link href="/css/chunk-vendors.87c094b1.css" rel="preload" as="style">
However, when I build and serve the files on my development environment, this asset is not present on the page.
yarn build
serve dist -p 8080
Additionally, it's batching up all the styles from all the vendors into this chunk, regardless of whether or not the styles are used in a particular entry point. Ideally, it would only include styles used in that entry point.
I haven't defined any config.optimization.splitChunks in vue.config.js.
I'm not sure if I'm missing something obvious here. Let me know if I should include more information (e.g. particular config settings).
Webpack doesn't create the css files in dev mode by default. To get around this you should add to your vue.config.js to your module exports
css: {
extract: true,
},
I'm working on a demo site with a bunch of one-off pages. Rather than have them all use the same CSS they'll each have their own stylesheets (with possibly a shared reset). I know I can just put a CSS file into whatever directory and it's fine, but it doesn't seem to work for Sass files.
Is there a way to get Jekyll to process any Sass file regardless of what directory it's in? Or at least in any directory within a certain folder?
It could be that you don't have any front-matter on your files if they're just in the css/ directory of your project.
Check out an example project here: css/main_css_file.scss, and have a read of this relevant part of the docs entitled "Assets"
Jekyll allows you to customize your Sass conversion in certain ways.
Place all your partials in your sass_dir, which defaults to <source>/_sass. Place your main SCSS or Sass files in the place you want them to be in the output file, such as <source>/css. For an example, take a look at this example site using Sass support in Jekyll.
If you are using Sass #import statements, you’ll need to ensure that your sass_dir is set to the base directory that contains your Sass files. You can do that thusly:
sass:
sass_dir: _sass
The Sass converter will default the sass_dir configuration option to _sass.
^ You may like to refer to the above if you want to inline the reset for each sheet. <source>/_sass or whatever you configure for sass_dir in the config could be it's home. (Although: you'd probably get a performance boost out of including it separately, so the browser could cache it between requests.)
How should one use grunt-processhtml in the development environment?
For example, in index.html, I'll do something like load partials for angular when this is built:
<!-- build:include:dist views/template-main.html -->
<script type="text/ng-template" id="views/template-main.html"> -->
</script>
<!-- /build -->
But I only want that to happen in the built environment, not the environment the development environment (app/) that's served by grunt serve?
Or, for a more common example,
<!-- #if NODE_ENV='production' -->
<script src=" production script "></script>
<!-- #endif -->
<!-- #if NODE_ENV='dev' -->
<script src=" sandbox script "></script>
<!-- #endif -->
How do I get only the sandbox script to be served in the development environment (app/) served by grunt serve
Should I be performing a grunt build every time and instead of grunt/node serving the contents of app/, somehow change it to serve a development build (i.e. dist/)
Or should I be writing these grint-processhtml directives (or any pre-processor) in another file, e.g. pre.index.html and have it built to index.html?
Otherwise, if grunt-processhtml is run, it removes the directives, if it's not, the browser obviously ignores the grunt-processhtml directives and loads both scripts.
(This is for a AngularJS project scaffolded by Yeoman, but is a general grunt-processhtml question)
I think I misunderstood how to use grunt.
I suspect it would be best to add different build targets, e.g. dev, production, etc, and not just use app/ and dist.
This involves setting up different built targets, setting different targets to be served.
A good explanation: Have Grunt generate index.html for different setups
I am using web yeoman.
In my applications index.html file I have this script includes.
I would like to know what these <!-- build:js ... --> mean and from which tool they originate?
I would also be grateful about any source link.
My problem is that I plan a very modularized angularjs app and I do not want to manually add 200 .js files to this index.html file.
Maybe this can be configured that during compiling those script entries can be copied over with a clever algo depending on my app folder structure...
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/services/factory1.js"></script>
<!-- endbuild -->
The build blocks are from grunt-usemin. It will not automatically scan and add files from a directory.
You can use a task like grunt-include-source to prep the HTML with the files from your scripts directory tree and then run usemin to concat and uglify them.
The grunt-include-source github page (linked in the last paragraph) contains examples of Gruntfile configurations to update the HTML. Your main challenge will be the src to dest juggle as the HTML is updated by multiple tasks. In the scope of things, compared to dealing with 200+ files, that should still be easier. The downside, of course, is that if you have any orphan files in your list of 200+...they will still get included and sent.
You can also see these StackOverflow questions where similar questions have been asked:
can grunt automatically include all my js in index.html?
How to include scripts automatically in a yeoman/grunt project?
I created a new project using yeoman angular generator which I then modified to some extend to fit my own needs. However later on I realized I'd like to use mean.io for express and mongodb supports. It took me quite some time to copy necessary parts from the mean.io default project to my own project. However I am still facing serious problems with grunt-rev and grunt-usemin.
The original yeoman generated project had app/ folder which contained all the AngularJS items. The new project however has app/ folder for all the items that exist in the server and then public/ folder for all the items needed in the client end. Now the grunt-rev plugin renames the css and image files to contain some identifier that matches the version of that item. I think this is pretty useful so I would like to keep it in my project. Now then; my index.html is located in the app/ folder and all the css and images are in the public/ folder. In my index.html I got images in format like "<img src="images/imagename.png">". This works when I test the project by launching the node express server since it offers both the app/views/ and public/ from the same location which is the server root. Usemin doesn't understand this however as the image sources don't match the absolute folder structure. I tried to move app/views/ content to app/ but to no avail. The same happens with css files that are built with cssmin. I got property in my index.html and under that all my css. After the build I got styles/main.css there but as usemin doesn't realize the folder structure, I end up with styles/main.css in index.html and 986a2d75.application.css in styles/.
Is there any way to let usemin know that two folders should be handled like they are one? I found that you could force usemin to look for certain pattern but that would force me to remember to add every image to gruntfile separately so I'd rather not use these plugins at all before I'd do that.
Finally found out about Generator Angular Fullstack which did everything I needed and more. It properly handles the copying of files from src->.tmp->dist and does all the necessary usemin magic in the process. Awesome tool!