We Keep Coding

JS files not loading using Webpack, Laravel Mix in Laravel 8

I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?

I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .

How to use concatenated minified file in Gulp

I'm brand new to Gulp and I was able to create a site.min.js file, which as I understand is the minified versions of my JavaScript files.
How do I take advantage of that?
I'm not sure if I'm on the right track, but should my index.html also be getting modified to only load the new min.js file?

When you minify a file, the result is a completely different file. You need to link it in your page in order to use it.
<script src="site.min.js"></script>
The production version of your index.html file should only link to the minified version and any non-minified version should be removed.
There are gulp plugins which help with this.
gulp-useref is popular
gulp-html-replace is quite flexible
gulp-usemin
gulp-htmlbuild
They all offer a similar feature where you can specify blocks within HTML comments that will be replaced by the minified version.
<!-- build:js -->
<script src="website-module.js"></script>
<script src="core.js"></script>
<!-- endbuild -->
With the right options within your gulp task, it would become:
<script src="site.min.js"></script>

404 error for bootstrap.min.css and bootstrap.min.js

I'm building a website and trying to use Bootstrap, however I'm unable to successfully call bootstrap.min.css and bootstrap.min.js.
I have Bootstrap unzipped in a new folder titled "Bootstrap" in my htdocs folder. In my Bootstrap folder I created a new folder to house my code for my website since this, in terms of organization, would be a lot easier. I also specified in my .html file to look for "bootstrap.min.css" and "bootstrap.min.js" in the following filepath in htdocs:
Folder Structure:
Bootsrtap folder with css, fonts, js, myWebsite subfolders, and test.html.
myWebsite folder with test.html
HTML (this is the test.html file in my "myWebsite" folder):
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
I tried running the example code off of Bootstrap's website and am getting a 404 Error for both of those files.
Since creating a new folder and then specifying the href wasn't working, I tried putting the sample code from Bootstrap's website directly into my "Bootstrap" folder and when I do this it works perfectly.
HTML (this is the test.html from the "Bootstrap" folder):
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
and
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I think there is something with the filepath I specified but I've been unable to get it to work after working on it for the first half of the day. What I'd really to know is how do I correctly call the "bootstrap.min.css" and "bootstrap.min.js" files while still maintaining my current folder structure? Any help/advice will be greatly appreciated.
Thanks

The paths for files are relative to your html file. For your test.html located in the Bootstrap directory you can access them by pointing at css/bootstrap.min.js and js/bootstrap.min.js. For your test.html located in the Bootstrap/myWebsite directory you can access them by pointing at ../css/bootstrap.min.js and ../js/bootstrap.min.js. The "../" will traverse up one directory into the parent of the current directory.

All your 'src' locations need a leading slash to indicate that the path is relative from the root folder (and not the current directory).
So your bootstrap location is like this:
src="Bootstrap/js/bootstrap.min.js"
Without a leading / character, the browser will append the src location to the current href location. For example, if the requesting page was at:
http://example.com/mydir/test.html
Then the browser would look for the bootstrap url at:
http://example.com/mydir/Bootstrap/js/bootstrap.min.js <<< note mydir here!
In most cases, you want to reference files from the root directory so that they don't change when you navigate to a page in a different directory. Your src location would look like this:
src="/Bootstrap/js/bootstrap.min.js"
When you have a leading forward slash, the browser ignores the current directory and assumes that the url is referenced from the root folder of your website (ie http://example.com/).
This would give an effective url for the browser to look up as follows:
http://example.com/Bootstrap/js/bootstrap.min.js
Which would be the correct one.
In summary, simply add '/' to all your paths and they will then be referenced from the root of your website and remain consistent whatever page/directory you happen to be on.

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Just copy the original js and assets folder from the source code downloaded directory, and place them inside your directory where the index.html file resides. restart the webserver if necessary to reflect the changes. This worked for me :)

I had the same problem when using these lines
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
I have changed them to:
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
I got rid of that error now. I hope this is helping.

Including external css files in Famo.us project

I've created a project using Famo.us's Yeoman generator. It creates an index.html file, a styles folder, a src folder, and a content folder. The gruntfile specifies that index.html includes all css files under the styles folder. However, I want to include a google fonts css file, by referencing it in my index.html. I can't insert this manually because grunt will overwrite my changes everytime i save a file in my project, how do I go about making grunt load my external css files/reference them in my index.html file?

Make sure you include your stylesheet outside of the <!-- build:css comments.
This works:
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />
<!-- build:css(app/) css/app.css -->
<link rel="stylesheet" type="text/css" href="styles/app.css" />
<!-- bower:css -->
Troubleshooting:
If this does not work with live-reload, try restarting the server!
Be sure to refresh page (i.e. clear cache or open developer console)
Example files:
See example files in this gist!
Explanation:
The specific Grunt task that rewrites CSS stylesheets in index.html is called cssmin, which is used in conjunction with useminPrepare and usemin.
Basically, useminPrepare writes a cssmin configration for you based on the <!-- build:css comments in your html file. See usemin docs.

grunt-usemin: Defining custom flow

I am using grunt-usemin plugin. I wonder how to do below.
I have two blocks of usemin config in index.html.
<!-- build:js /scripts/scriptsmin.js -->
<script src="/scripts/jquery.min.js"></script>
...
...
<!-- endbuild -->
<!-- build:js /scripts/scripts.js -->
<script src="/scripts/app.js"></script>
....
...
<!-- endbuild -->
First block, scriptsmin.js, is minified files.
Second, scripts.js, contains all files which needs minification.
I like to.
run minifier (uglifyjs) on second block
concat first block with minified version of second (step 1)
Is it possible if these blocks are in the same file. I saw a section on flow. Couldn't follow whether I can name the block of configuration, and set seperate flow on each of it. It talks about flow based on file name (index.html). How should I write the grunt useminPrepare section.

I had the same problem. If you'll be satisfied with two files instead of one you can use a fork of usemin here. It enables few new flows, namely
libs
libs2min
void
remove
See full descriptions. So your html would be:
<!-- build:libs2min /scripts/scriptsmin.js -->
<script src="/scripts/jquery.js"></script>
...
...
<!-- endbuild -->
<!-- build:js /scripts/scripts.js -->
<script src="/scripts/app.js"></script>
....
...
<!-- endbuild -->
Nesting the blocks isn't probably a good idea right now unfortunately. But you could try it out.
To install the fork instead of the regular grunt-usemin change your package.json as so
"devDependencies": {
...
"grunt-usemin": "Rauno56/grunt-usemin",
...
},
and keep an eye on the main repo - maybe the feature isn't to far from getting there too.

Just wondering why you need two separate targets for your JavaScript files, especially if they are going to be minified & concatenated into one file. What I would do is just have the one script block at the end of your file, like this:
<!-- build:js /scripts/scripts.js -->
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/app.js"></script>
<!-- endbuild -->
It's easier to understand like that, if all your JS is at one block rather than two. The useminPrepare is a task that basically updates your Gruntfile configuration to include concat, cssmin and uglify targets for your scripts and styles. Just run it on the files that have your build comments in, like so.
useminPrepare: {
html: 'build/index.html'
}
usemin shouldn't look too different to useminPrepare, but what you may find you want to do is 'seed' useminPrepare with one file, if that contains the same build blocks as the rest of your HTML. So the actual usemin config could have a few more files in there:
usemin: {
html: ['build/index.html', 'build/about.html', 'build/contact.html']
}
After useminPrepare runs, then run your concat, uglify and cssmin tasks, then finally run usemin. So you have a custom task like this:
grunt.registerTask('build', ['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);
Hope this helps.