We Keep Coding

How to minify my personal jquery frontend microframework

I've made my personal jQuery microframework with useful utilities. It has a directory structure like this:
/jspocket
- jspocket.js
/scripts
- include.js
- navigation.js
- slider.js
- popups.js
...
Therefore it is imported into html like this:
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jspocket/jspocket.js"></script>
In jspocket.js is this code for importing all the .js files from '/script' directory into an html file:
$.getScript(jspocket_dir + "/scripts/navigation.js");
$.getScript(jspocket_dir + "/scripts/popups.js");
$.getScript(jspocket_dir + "/scripts/slider.js");
$.getScript(jspocket_dir + "/scripts/include.js");
...
Now I would like to create a minified version of my framework so there will be only one file jspocket.min.js. But the problem is that the commands like:
$.getScript(jspocket_dir + "/scripts/navigation.js");
will not work, simply becouse scripts/navigation.js does not exist in minified version, it should be all in one file.
So the question is how could I minify the framework into one file (without manually copying all the code into one file)? Should I change the way scripts are imported? Does the new import/export features of JS solve it somehow? How is this problem solved in general? I'm using node.js and npm, so maybe there could be a good packages for this?

You need to use a build system to minify the files into one file but leave jspocket.js out of the process.
There are many build systems out there like GruntJs , Webpack or Gulp
This following is how to do it in Gulp
// the plugins
var gulp = require('gulp')
var uglify = require("gulp-uglify");
var concat = require('gulp-concat');
// task
gulp.task('minify-js', function () {
gulp.src([
./jspocket/scripts/navigation.js,
// the rest of your files in your order
])
.pipe(concat('jspocket.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
then run gulp minify-js

Compile all css files into one css file in gulp

I'm trying to learn Gulp. Got a gulp watch fine and can easily compile scss to css. This is all working.
I am stuck now though.... How can I compile multiple css files into one css file?
I am currently using:
gulp.task('styles', function () {
return gulp.src('app/css/*.css')
.pipe(concatCss('styles/bundle.css'))
.pipe(gulp.dest('dist/css'));
});
But it's not working. All that keeps happening is my app files (main.css and section.css) are output in my dist folder (this is correct) but not in one file. They are just simply compied instead of both being compiled into a styles.css file for example.
Thank you for any suggestions. As I say, I am trying to learn Gulp. I thought I had been doing well until this.

Proper way to require external js and css libraries in ember js?

I have been playing around with ember 1.13 and I can see that in some online tutorials they require js and css via index.html while some uses ember-cli-build.js or brocfile.js for older versions. I find it requiring properly when I use ember-cli-build.js but then I am not sure what exactly the use of index.html

It depends.
If you have a ember-cli-plugin it will add the files to the vendor files by itself normally. Like with ember-cli-materialize.
If you are installing a random bower package like Ladda, you would need to add the files you need manually to ember-cli-build.js:
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
});
app.import('bower_components/ladda/dist/ladda-themeless.min.css');
app.import('bower_components/ladda/dist/spin.min.js');
app.import('bower_components/ladda/dist/ladda.min.js');
return app.toTree();
};
This will then be merged into your vendor.css and vendor.js which are linked to from index.html.
Also when you build the app the bower_components won't be available unless you've explicitly included something, so you cannot just link to them from index.html. It would also be a waste of network resources to include files separately. You shouldn't have to include anything in index.html unless it's an external resource.
brocfile.js is the old name for ember-cli-build.js since they've stopped using broccoli. Just use the newer one.

Using GULP to load Jquery CDN and other external JS sources

I've been trying to find a definitive answer to a problem I'm having using GULP to load the latest jquery CDN or any other Javascript CDN external sources.
What I've got so far is all our JS files being found in a folder, concatenated to a single file and placed in a new folder called min. Ideally I'd like to also link into the concat process the jquery CDN's and other external js files.
Does anyone know what is the best way to do this?
Here is the code I've got so far:
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var notify = require('gulp-notify');
gulp.task('js', function () {
return gulp.src('js/**/*.js') //select all javascript files under js/ and any subdirectory
.pipe(concat('mynewfile.min.js')) //the name of the resulting file
.pipe(uglify())
.pipe(gulp.dest('min')) //the destination folder
.pipe(notify({ message: 'Finished minifying JavaScript'}));
});
gulp.task('watch', function() {
gulp.watch('js/**/*.js', ['js']);
});
gulp.task('default', ['js', 'watch']);

As far as I know, Gulp is a helper to manage your project locally, not by connecting to external sources.
A common approach would be to manage current library versions by a package manager like Bower – there is an integration bridge available (didn't test it though, I just update packages manually).

How to handle angular module dependencies in other directories?

Let's say that, I have a main module:
angular.module('myApp', ['myApp.view1']);
And the other module
angular.module('myApp.view1', ['ngRoute'])
the second one is in another directory in the project.The first module cannot find it's dependency, only if I also add
<script src="view1/view1.js"></script> in the index.html
,but it quickly becomes pretty hard to manage by hand, if one has lots of javascript files.
What is the best way to manage dependencies between angular modules, so that they can recognize each other?

You can use a task runner like grunt or gulp and concatenate all the javascript files during the build step and include that one file in your index.html file. I use gulp and here is a sample gulp task that helps you concatenate all the JS files using the gulp-concat plugin.
gulpfile.js
var gulp = require("gulp");
var concat = require("gulp-concat");
//if all your source js files are inside the src directory
var srcJs = ["src/**/*.js"];
gulp.task("js", function() {
return gulp.src(srcJs)
.pipe(concat("app.js") // concat into 1 file called app.js
.pipe(gulp.dest("dist"); //save app.js in dist directory
});
So add this gulpfile.js in your project root folder and every time you make code changes, go to the project root folder in the command line and run the command "gulp js". This will run the js task and concatenate all your JS files and store it in a file called app.js in the dist directory. And in your index.html file you can always point to this one file dist/app.js.

They can only recognize each other, if they are added as script files. A best practice is to minify all of the javascript files within your directory structure into one file before publishing.