i'am a newbie and started to build a webapp with yeomans webapp generator and a static html 5 template. The template is able to use over 40 plugins.
The template directoy structure is like:
index.html
--assets
--css
--js
--img
--plugins
--bootstrap
--cs
--fonts
--js
...
...
My project only uses a quite little part of it.
Is it possible to determine which files are used(referenced) within the project,
and copy them automatically with a grunt task to the .tmp and .dist folder?
Currently i used httrack to find that out. But there must be a other way.
(a special grunt task or perhaps a plugin for webstorm ? )
For minifying the output i use the default task with
'clean', 'jshint', 'copy', 'usemin', 'concat','cssmin', 'uglify'
which means:
'useminPrepare', // Looks for those in your HTML
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and src/ into dist/
'usemin' // Updates the references in your HTML with the new files
For the concat task i use this code to make sure all needed files are included:
concat: {
css: {
src: ['src/**/*.css'],
dest: 'dist/assets/css/main.min.css'
},
js: {
src: ['src/**/*.js'],
dest: 'dist/assets/js/main.min.js'
}
The resulting files are quite big. Remember the bunch of plugins.
What must i do to ensure the resulting files (js/css) contain only the needed parts ? As far as i can seen uglify,cssmin etc. doesn't strip the files. Must i include here grunt-uncss or something like that ? The same goes for the html file. After minifing some parts are not working as expected..
(The best would be a generator where i just put in the complete webpage in the src folder, and the grunt build task produce out of the box an optimized dist folder, only with the need files.)
Hopefully you outhere can help me with some good advises for my both problems.
Thx.
Related
My current project is setup into 3 main JS files.
1.js (contains jquery, bootstrap etc) around 15 js files
2.js (contains other addons like recaptcha, SAP stuff etc) around 20 files
3.js (contains over 80 custom JS files for my website)
Until this point these were minified by wro4j in a specific order. Meaning I had an XML file in which all my files were placed in the order they needed to be minified.
I'm switching to grunt for minification and I would like to do something like below
terser: {
my_project: {
files: {
'webroot/_ui/minified/file1.js': [
'webroot/_ui/responsive/common/js/*.js',
'webroot/_ui/responsive/common/owlCarousel/owl.carousel.min.js',
'webroot/_ui/responsive/common/swiper/swiper-bundle.js'
],
'webroot/_ui/minified/file2.js': [
'webroot/_ui/addons/common/js/*.js',
],
'webroot/_ui/minified/file3.js': [
'webroot/_ui/custom/common/js/*.js',
],
}
}
}
Can I get away with something similar or I have to maintain the order used in wro4j (meaning I type out individually all JS files in the order they need to be loaded)
Thank you!
I'm using NX.dev with Angular projects and I have a few projects and libs.
Im having a few static CSS/SCSS files I want to share for all projects (Apps & libs)
First CSS file - I want to just bundle it in the projects, in order to do that I added it to the project JSON file per app like this.
"targets": {
"build": {
"styles": [
"libs/ui/src/lib/styles/style.bundle.css"
],
}
}
It's working great, But I'm not getting I'm getting the same effect for the libs (It's not working)...
Second SCSS file - this file is a global variable file, I want this file to be available on-demand in the lib SCSS files.
I want each file to be able to do this:
#import "variables";
Not sure how to achieve that.
Any idea how can I get these two files into my libs?
One file should add on compile and one on-demand.
Thanks in advance!
Is it possible to configure the gulpfile to output several files rather than one?
All the examples I came across demonstrate minification and concatenation of all js files into one big bundle js file the index.html would load.
When your apps get bigger and more complex using many libraries, this bundle gets bloated pretty quickly and you come to an understanding that one big bundle file is not a good fit to scale your app.
Is this concatenation a must? or can we simple minify & uglify & browserify each file to a corresponding minified version in the output folder?
Cheers
Ajar
You can definitely configure a gulpfile to output several files rather than one. For instance, I have a gulp task:
gulp.task('styles', function () {
gulp.src('dev/less/*.less')
.pipe(plumber())
.pipe(less())
.pipe(prefix())
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
});
I have 5 .less files in my less folder, and they become 5 .css files with matching names in my distribution folder.
And for JavaScript files as well:
gulp.task('scripts', function () {
gulp.src('dev/landing/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
Four JavaScript files become uglified versions of themselves in my distribution/js folder.
However, this is a different question if you want to address browserify specifically. browserify builds with the intent of including any dependencies stemming from your initially included JavaScript file.
If keeping separate files is more important to you, you can look into browserify-deoptimizer
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.
I'm beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems useful, especially during development, so I don't need to recompile all of the js files into mylib-<version>.js whenever I change one of the dependent files.
My app is distributed with both html and javascript files, and in production, I would like to use the compiled version of the javascript file.
So in development, my html file might look something like
<html>
<head>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
</html>
But in production, I would expect it to look more like
<html>
<head>
<script src="mylib-1.0.js"></script>
</head>
</html>
I wouldn't think it production that there should be any need to reference requirejs if I am distributing a compiled file.
Is there a way to do this without having to manually change my html files before I distribute the app?
RequireJs has an optimization tool, which can help you to minify and concatenate your modules. It has a lot of options, and can be difficult to use, but it gets easier with a build tool like GruntJs or (especially) Yeoman, which uses GruntJs to build.
In both you can use the rjs task (which optimizes modules), but again Yeoman is a bit easier since it has generators which will configure it already for you:
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
In the index.html you just use a comment line to specify which js files should be minified/concatenated to which output file:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
In the example above, the modules will be concatenated to ONE file, named amd-app.js.
Edit:
This will be done by executing grunt from the command line. This will start a lot of useful tasks, which will build the project in a dist folder, but again this is highly adaptable.
The resulting index.html file (in dist) has only (if you want) one javascript file:
<script src="scripts/15964141.amd-app.js"></script>
My advice: use Yeoman to make life easier (at least for handling minification/concatenation).
First you have to compile your depency tree into one file using the r compiler. After that you can a striped down AMD loader like almond. At least you have to find a way to change the url in your index html.
Take a look at gruntjs which can automatize the whole thing, there a bunch task to like usemin that helps you with the process.