Though I hate it, I chugged down most of the theory of modern web design.
Let's pretend I am doing a full stack website with no heavy machinery in the background (node, server side stuff etc) just old plain html/css/js.
Now I did a npm init in the folder where I'm developing the website.
I put in bootstrap along with jquery, popper and all its dependencies.
Now I want to include bootstrap in the page.
How?
Though I never saw browserify and webpack before, I've read they are useful for js only so you can "require('module')" in your javascript code but no use for css in the frontend (html files).
For those, I saw people suggesting to point to a folder and prepare grunt (javascript task runner) scripts to copy css in folders where you point at.
There is any way?
My conclusion is:
NPM/browserify/webpack = Useless rube goldberg machine until you start developing javascript/node in the background
Solution: Old CDN/Download local copy and link it in the code
What am I missing?
Related
I guess I'll get some flak for even asking, but here we go.
I'm a full-stack web developer, and most of the projects I work in are based on WordPress. I start by developing front end mockups in CodeKit, using Pug, Sass and transpiled JS modules. It works mostly well, but it takes some self discipline and effort to keep things minimally modular, lean and clean.
I have also worked on some Vue.js projects, which I have absolulety loved. I have successfully combined both platforms, using WP as a headless CMS for Vue.js. But many WordPress projects just require a regular theme, coded in PHP with monolithic styles and scripts.
I would very much like to be able to code my mockups in Vue and somehow generate a completely static build, much like the one I get with CodeKit (or webpack, gulp, ...). All scripts bundled into a single JS file, all styles in a single CSS file. Then some other dev (or myself) could start building a WP theme from that static mockup.
Vue features I'd like to use:
.vue component files, with markup, scripts and styles within the same file
Component slots
I don't need routing, state store or anything fancy
Is this even possible?
Do we need to include the SASS file in production? Can't we just deploy the compiled CSS output? How do you guys deploy your CSS/SCSS code in production?
If any of you don't include SCSS in production how do you deal with version control like Git. I assume the master version should have the SCSS file there, but pulling from production environment it should be excluded? Is this problematic?
I just want to see what the most efficient way to do this.
The reason I asked this is because, using Chrome DevTools lately I've been seeing scss files as source. To see what I mean, if you go to getbootstrap.com and inspect its styles, you'll see scss as the source.
The browser does not render or understand SASS code. Thus serving such files for the sake of styling not only is not required but it doesn't even work¹.
¹ Well, yeah, it can work—there're many SASS implementation, including a JavaScript one that can be used in a browser.
The SASS code you see in your browser's developer tools (not just Chrome) is a developer tool. In order to diagnose CSS issues you can instruct your SASS compiler to generate source maps. A source map is a document that links positions in your possibly minified CSS files to the SASS source code it comes from. When you open your developer tools and the CSS file declares a source map (example):
/*!
* Bootstrap v4.1.3 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f[…]
/*# sourceMappingURL=bootstrap.min.css.map */
… the browser downloads the map (example) which in turn links the corresponding SASS source code files.
{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss"[…]
Together with the file/line/column mapping information, developer tools can reconstruct the SASS code where a given element styles come from.
"mappings":"AAAA;;;;;ACAA,MAGI,OAAA,QAAA,SAAA,QAAA,SAAA,QAAA,[…]
The source files are obviously not required. Whether to include them or not depends on factors like:
Is it okay to distribute them or they contain stuff that's meant to remain private like internal comments or intellectual property?
Do you need to diagnose stuff in the live site?
Sass is converted to CSS, So you don't need to install it on the server. It only needs to be installed locally, Browser only understands CSS, SAAS is a preprocessor scripting language make your code easy to organize and edit with a little effort.
It depends on your build process. If you push Sass files and compile on the webserver when you run your deployments then yes. But I have a file structure something like this:
- src
--- styles
------ Sass files
--- js
--- images
- build
--- assets
------ styles
--------- CSS files
------ js
------ images
So I push everything into git and before I deploy changes to live I run my build commands* locally then push everything into Git.
From here, I deploy everything within the /build directory up onto the webserver for my site.
* My build commands are my regular compiling commands except I minify on build only.
I am finding old CSS code on my browser instead it has the new code in server files. I can see the minified CSS code on browser when application gets loaded up.
My team is using Liferay framework which seems to minify the CSS files. I am noob in liferay.
I found portal-ext.properties under liferay-portal-6.1.10-ee-ga1/tomcat-7.0.25/webapps/ROOT/WEB-INF/classes/ but didn't found any parameter for minifying the CSS files?
You shouldn't just update any CSS code you find deployed on the server. Instead, update your theme, build it (it builds to a web application) and deploy it to the server. This will take care of minification and updating caches. Just changing random files in the realm of the webserver will not.
For this you'll have to find the source files for your theme (or a whole plugins-sdk, which might contain that theme). Look at your organization's source control system, which is where I'd expect it.
Explaining how to update and build themes goes well beyond the scope of a single answer here, if these are really your first steps it might be worth getting some help from someone who has some experience with Liferay.
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
TL;DR: IItemTransform isn't getting executed when a minified file already exists in the same folder as the original (non-minified) file.
Problem explanation
I'm having this issue mainly because of CSS relative image references. If you used IItemTransform with Javascript files, the same applies.
This is what I'm using:
I'm using Visual Studio with Web Essentials addin to have support for LESS files
I'm writing LESS files and have Web Essentials addin automatically minify files on save
I'm also using bundling and minification in my project
When creating CSS bundles I'm using CssRewriteUrlTransform to make CSS URLs absolute (i.e. background images) so that images still work after bundling several CSS files together
Nothing unusual here so far, but it doesn't work.
What seems to be the problem?
The way that bundling and minification works is it tries to avoid excessive processing. This means that when a minified file exists in the same folder as the original one it won't run its own minification and rather serve existing file.
This would be all right as long as it would at least run transforms over those preexisting minified files. But it doesn't. So I end up with relative URLs in a bundle which breaks pretty much all those resources.
Workarounds
Always provide absolute paths in LESS files
Disable file minification on save in Web Essentials settings
Refer to minified files when defining my bundles because they don't have a minified version (*.min.css doens't have a *.min.min.css) so minifier actually picks up the file and minifies while also running transformations over it.
From the standpoint of my development process and tools used (and configured the way they are) this looks like a bug. If those files would be the result of the same minification process this wouldn't be a bug at all as transformations would be executed when minification would execute. It's true that such functionality doesn't exist and likely never will as app would need write permissions to make it work. Outcome: this is a bug. Existing minified files should be processed through transformations before being cached.
Question
Is it possible to somehow convince bundling and minification to either:
not use existing minified file versions
run transformations over existing minified versions
Have you considered using Grunt? http://gruntjs.com/
It has a learning curve, but, the information pool is huge. The issues that you are having with web essentials wouldn't be a problem with grunt.
I'm using it in VS, now, to minify, bundle and transpile both css and javascript as well as reorganize files into a deployment directory. Once you've set up a directory structure, a grunt file could very easily be reused.
With the add-on in VS (linked, below), you can right click on the grunt file and select the grunt tasks to run from a popup menu.
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Grunt "tasks" as they are called can be created by downloading various plugins i.e. https://www.npmjs.com/package/grunt-contrib-less.
I have never used LESS or web essentials, so please take this post for what it is worth (not much.) Could you add a pre-build command to simply delete the old files, then do a rebuild when you need to update the CSS.