Geekly Articles each Day
📜 ⬆️ ⬇️

Minify a project created in Blocs 1.5.2 using Gulp



Not so long ago, I learned about a new Bootstrap site building tool - Blocs . I didn’t find any information about him on Habré, so I’ll allow myself some marketing notes, as this tool made my work easier.

Blocs is focused on simplicity, this tool brings a fresh perspective to creating modern, high-quality websites, without the need to understand or write code.

Blocs positions itself as a designer, which allows you to generate code that is as clean and as good as a professional layout designer.
')
Blocs works as a desktop application under Mac OS X, and does not limit you to the number of sites you create, as online designers do.

Blocs on the fly makes the layout adaptive (not always, though, qualitatively, but since the code is readable and clean, easy to fix), it also supports Retina.

More about Blocs on the official website. Trial available 5 days.
The program is simple, so this trial is enough.

Blocs really generates very high quality code and convenient project structure.



As you noticed, the program is not yet adapted for the Russian segment, and the program does not have the ability to generate a minified version, which is why I turned to the favorite GulpJS collector for help.

What tasks do we set for ourselves with GulpJS?


Let's start in order, with the processing of html-files. At this stage, it is assumed that you have already figured out how to put NodeJS, NPM, GulpJS. If so, then we continue to read, if not, then it is necessary to deal with this issue.

Create a BLOCS folder in the Documents directory (for example, I did this). There you can export finished projects, each in a separate folder. In this directory, create a file gulpfile.js, and connect the necessary plugins to work.

var gulp = require('gulp'), gif = require('gulp-if'), uglify = require('gulp-uglify'), concat = require('gulp-concat'), sourcemaps = require('gulp-sourcemaps'), rename = require("gulp-rename"), replace = require('gulp-replace'), htmlify = require('gulp-minify-html'), cssify = require('gulp-minify-css'), uncss = require('gulp-uncss'), russian = require('translit-russian'), translit = require('translit')(russian);

My project is called milano2. And in order to be able to optimize different projects with one gulp-file, I will create the project variable.

 var project = "milano2";

Since our task is aimed specifically at optimizing Blocs projects, I create an object containing a list of files generated by this program, in the hope that in future versions nothing will change in the name, and if anything changes, nothing will be easily corrected.

 var assets = { js : [ project + '/js/jquery-2.1.0.min.js', project + '/js/bootstrap.js', project + '/js/jqBootstrapValidation.js', project + '/js/blocs.js', project + 'js/formHandler.js' ], html : project + '/*.html', css : [ project + '/css/*.css', project + '/style.css' ] };


Getting to the decision

And after that we start solving problems with HTML. What specific tasks are facing us?


And, of course, minify it all. To do this, we write the following task.

 gulp.task('html', function(){ var menus = []; gulp.src(assets.html) .pipe(gif(notMinifiedHtml, htmlify())) .pipe(replace("<link rel=stylesheet type=text/css href=./css/bootstrap.css><link rel=stylesheet id=ppstyle type=text/css href=style.css><link rel=stylesheet href=./css/animate.css><link rel=stylesheet href=./css/font-awesome.min.css>", "<link rel=stylesheet href=css/build.css>")) //   ,       .pipe(replace("<script src=./js/jquery-2.1.0.min.js></script><script src=./js/bootstrap.js></script><script src=./js/blocs.js></script>", "")) .pipe(replace("<script src=./js/jqBootstrapValidation.js></script><script src=./js/formHandler.js></script>", "")) //  .pipe(replace("</body>", "<script src=js/build.js></script></body>")) //     .pipe(rename(function(path){ path.basename = translit(path.basename); //      })) .pipe(replace(/<a href=((?!http|#).*?)\.html/g, function(str) { return translit(str); //         })) .pipe(gulp.dest(project + '/build')) });

Step-by-step work I described in the comments to the code, if you know how to optimize the work, or for example a better regular expression algorithm, I will be very grateful in the comments.

After completing the task in the created folder, the build will be our updated project files, and if they were Cyrillic, now there is no such problem. Ahead of us is the task of minifying and sticking style sheets.

There is such a gulp-uncss plugin that allows you to remove unused classes and styles, this approach is good to use if you do not plan to modify something yourself after exporting from Blocs. I decided to remove unused styles, and instead of build.css of 125kb in size, I received a size of 45 kb, without prejudice to the project. Let's see how it works. Writing a new task.

 gulp.task('css', function(){ gulp.src(assets.css) .pipe(gif(notMapping, sourcemaps.init())) .pipe(concat('build.css')) .pipe(gif(notUnUsedCss, uncss({html: ["milano2/build/*.html"], ignore : ignored}))) .pipe(cssify()) .pipe(gif(notMapping, sourcemaps.write())) .pipe(replace("img/", "../img/")) .pipe(gulp.dest(project + '/build/css')) });

The code is simple, it does not need comments, you can see that a map is created if desired, unused styles are deleted if desired, the paths to images from the style.css file are corrected, and all this is minified and added to the correct folder. The original size of all CSS files was 250 kb, after compression 125 kb, and after using the gulp-uncss plugin - 45 kb.

results

JS minification, is not of particular interest, you can see it in other publications on Habré, and the task of this article is to optimize the resources generated by the Blocs program.



As a result of the work done, you can optimize all projects created in Blocs, changing only the project variable in gulpfile.js.

I hope someone will find the use of this tool. If you make any beauty with Blocs, share in the comments, I want to see what she is capable of in skilled hands. At the time of writing, the current version 1.5.2.

Examples of sites created using Blocs.

http://groundbreakers.eu/
https://espora.co/
http://www.cascademanila.com/
http://www.nowbranded.com/
http://www.rfidwithsms.com/
milano.site (russian, optimized)

The final result of the gulpfile posted on github , the documentation may write later. Thank you for attention!

Source: https://habr.com/ru/post/270617/

More articles:


All Articles