5

I use multiple stylesheets for CSS to organize the code and directory folders, however, it seems that @import shouldn't be used in CSS? Moreover, it also seems like concatinating your code (which is what @import does) and minifying it(removing comments, spaces, and sometimes reducing long variables) can help with the process of loadtime on a webpage

Using npm are there efficient ways to concat and minify on the go? or is it best to develop it all, then when it is ready for distribution to take the time to concatinate and minify, rather than having it happen on every reload of the page while you are building the page

  • You might be looking for https://webpack.js.org/ or any task runner such as Gulp/Grunt. – Ravenous May 15 '18 at 16:02
  • Why don't you just use Gulp? It does all that you need out of the box: https://gulpjs.com/ – andrralv May 15 '18 at 16:02
  • 2
    Some may suggest Webpack (complicated in my opinion), others may suggest Gulp or other asset management pipelines. Either way, there is an automated tool set you can use to handle this - see this question - https://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack – Adam May 15 '18 at 16:02
  • So these tools are better than npm? thats there mani purpose isn't it? ive never used gulp –  May 15 '18 at 16:10
  • NPM is only a package manager. Gulp can be installed via NPM. Here's a common Gulp config - https://gist.github.com/Raven0us/9bbed34291b1a9b5ef84d7e9f03bc9ee . – Ravenous May 15 '18 at 16:19

1 Answers1

2

First of all, you're talking about two different process flows. A distinction is made between development and production environments.

As a developer you are naturally dependent on the development environment. It is advisable to recompile your files at every file change. These don't have to be minified, but everything concerning styling, i.e. SCSS files for example, should be transformed into browser-readable format, i.e. CSS.

Later, as soon as you can say, Yes, now all requirements are met and all bugs are fixed, you start production. This compiles or rather transplies TypeScript or ES6 in JavaScript and SCSS, LESS etc. in CSS. In addition, your files are compressed so that loading times are reduced. Also you've got a repository of files, that can be distributed to a server or other publishing service of your choice.

In this so-called build process you create a public or dist(ributed) folder in which all files are stored. Unlike the development environment, where only the files are kept more or less temporarily.

Popular processing libraries are:

Typical processes are:

  • Concatinating many files to few or less files
  • Compressing and minifying
  • Transpiling higher languages down to browser readable code (for instance JS, CSS, HTML, JSON)
Michael W. Czechowski
  • 3,366
  • 2
  • 23
  • 50
  • 1
    so it sounds like I have my thought process correct. When ready to distribute a public version NOT for development, then I create a dist folder and THAT is when I can do the minify/concate/compressing/etc where all the formating for development can be thrown out for the use of loadtimes. I just didn't know if that process was usually done DURING the development too. So I have to compile SAAS on every change because its a dev tool, however, I would NOT reminify the files every time because thats a waste of time, minify at the end? –  May 15 '18 at 16:09
  • @Jordan That's right, your hitting the nail on the head. – Michael W. Czechowski May 15 '18 at 16:12