6

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

Improve this question
5
  • You might be looking for webpack.js.org or any task runner such as Gulp/Grunt. Commented May 15, 2018 at 16:02
  • Why don't you just use Gulp? It does all that you need out of the box: gulpjs.com Commented May 15, 2018 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 - stackoverflow.com/questions/35062852/… Commented May 15, 2018 at 16:02
  • So these tools are better than npm? thats there mani purpose isn't it? ive never used gulp Commented May 15, 2018 at 16:10
  • NPM is only a package manager. Gulp can be installed via NPM. Here's a common Gulp config - gist.github.com/Raven0us/9bbed34291b1a9b5ef84d7e9f03bc9ee . Commented May 15, 2018 at 16:19

1 Answer 1

Reset to default
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)
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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?
@Jordan That's right, your hitting the nail on the head.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.