What kind of Gulp plugins should be used for more efficient, in terms of ergonomics of resources, reducing compile time for organizing tasks.

The project structure is as follows:

  dev |--component1 // ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° |--component2 ..... |--scss |--base // Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ с миксинами ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠΌ |--elements // ΠΎΠ±Ρ‰ΠΈΠ΅ для всСх страниц элСмСнты оформлСния (ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ‚.Π΄.) |--componets |--component1 |--style.scss |--component2 ........ |--main.scss

All this is going like this:

 app |--component1 // ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ |--css // ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ стили ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° |--style.css |--component2 ..... |--css // Π³Π»Π°Π²Π½Ρ‹ΠΉ css |--style.css

Task sass for all this stuff:

 gulp.task('sass', function() { return combiner( gulp.src([ 'dev/scss/main.scss' , 'dev/scss/project components/**/*.scss' ]), debug({title: 'src'}), gulpIf(isDevelop, sourcemaps.init()), sass( sassOptions ), autoprefixer({ browsers: ['last 4 versions'] }), gulpIf(isDevelop, sourcemaps.write()), rename(function (path) { path.dirname += '/css'; path.basename = 'main' ? 'style' : path.basename; }), gulpIf(!isDevelop, cleanCSS()), gulp.dest('app'), debug({title: 'dest'}) ).on('error', notify.onError(function(err){ return { title: 'sass', message: err.message } })) });

Now, when a task is executed, all files from the component folders and the main styles file are placed in the app folder, regardless of whether they are modified or not. It would be desirable that the manipulations were performed only with modified files + an incomprehensible issue with caching of files connected via @import .

It is also a matter of adding deleting files and rewriting URLs to files connected via css (pictures, fonts ...)

I would be grateful for detailed answers and tips on organizing the task.

    2 answers 2

    Ideally, the assembly should be such that the compiled files that will be given to the user are separate from the sources and can be safely deleted if necessary. In addition, this will allow you to do additional optimizations with the source files and not change the paths in the assembly.

    Style Organization

    In general, you have perfectly organized the assembly of styles: organized variable environments, added autofextruder. However, I would advise you to create two separate tasks for different environments in order to exclude additional conditions. In addition, it would be possible to add only 'dev/scss/main.scss' as paths and do @import in it to the rest of the files.

    I would also advise you to add livereload() so that when you change files, your local server automatically loads all changes.

    Also, I don’t understand how you would like the manipulations to be made only with modified files. If you compile all scss-files into one main.css , then operations will be performed on all main.css , after assembly. If you want the manipulations to be made only with the file that you are changing, you need to connect each of these files to the document and not to combine them during development.

    Organization of pictures

    I would advise you to keep the original images separately and transfer them to the build folder when compiled (let's call it public ). In addition to the usual transfer, it would be good to compress these pictures:

    For example, pictures can be easily compressed without losing quality only by deleting exif-data. On a real site, you can reduce the size of images by an average of 70%, which on a modern site is approximately 4 MB. Example on gulp :

     var gulp = require('gulp'), imagemin = require('gulp-imagemin'), imageminJR = require('imagemin-jpeg-recompress'), imageminSvgo = require('imagemin-svgo'); // Optimizing images gulp.task('imagemin', function() { gulp.src('./img/**/*') .pipe(imagemin([ imageminJR({ method: 'ms-ssim' }), imageminSvgo({ plugins: [ {removeViewBox: false} ] }) ])) .pipe(gulp.dest('./public/img/')) });

    And for browsers that understand the lightweight webp format (format developed by Google), you can also make this version of the images:

     var gulp = require('gulp'), webp = require('gulp-webp'); // Generate Webp gulp.task('webp', function() { gulp.src('./img/**/*') .pipe(webp()) .pipe(gulp.dest('./public/img/')) });

    Font Organization

    The same goes for fonts, but they only need to be moved to public :

     // Replace fonts gulp.task('fonts', function () { gulp.src('./fonts/text-font/*') .pipe(gulp.dest('./public/fonts/')) });

    Creating an icon font

    It would be preferable to use the iconic font instead of pictures-sprites. And this method has several advantages:

    1. Lower font weight than sprite;
    2. CSS styling flexibility;
    3. Less weight CSS;
    4. Flexible size and unnecessary creation of versions for Retina-displays.

    To generate an icon font, I would advise this combination:

     // Generate icon font gulp.task('iconfont', function() { var fontName = 'icon-font', cssClass = 'i'; // Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ SVG-Ρ„Π°ΠΉΠ»Ρ‹ gulp.src(['./fonts/icon-font/*.svg']) .pipe(iconfontCss({ fontName: fontName, cssClass: cssClass, path: './styl/mixins/icon-font.styl', targetPath: '../../styl/components/font/icon-font.styl', fontPath: '../fonts/' })) .pipe(iconfont({ fontName: fontName, prependUnicode: true, normalize: true, formats: ['svg','ttf','woff','woff2'] })) .pipe(gulp.dest('./public/fonts/')); });

    Bowls for styles that come from this line path: './styl/mixins/icon-font.styl' will look like this:

     @font-face font-family "<%= fontName %>" src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg') [class*="i-"] position relative display inline-block width 1em height 1em &:before font 14px '<%= fontName %>' font-size inherit text-rendering auto speak none font-variant normal text-transform none color inherit position absolute top 50% left 50% transform translate(-50%, -50%) <% _.each(glyphs, function(glyph) { %> .<%= cssClass %>-<%= glyph.fileName %>:before content "\<%= glyph.codePoint %>" <% }); %>

    After generating the font, all you need to do is connect the generated CSS to your site or ingress it to the main CSS file, and then use it like this:

     <span class="i-<<имя исходного SVG-Ρ„Π°ΠΉΠ»Π°>>"></span>
    • Also, I don’t understand how you would like the manipulations to be made only with modified files. The folder where the development is conducted is organized as follows: there are folders project components in it folders with various separate , independent of each other components of the project, each must have its own style file and index document. - pepel_xD
    • There is also a scss folder in the root of which main.scss is main.scss - this is a common style file for all components, it also has folders with mixins files and other included files and a folder where the same style files for style.scss components of the project are style.scss by folders with the name of the component. In each of them there are also imports of connected files (mixins, extents, grid ...) - pepel_xD
    • So, I would like, when you work on the style of one component, only he got into the assembly folder, and not the whole heap of a target (meaning the individual style.css at the output of each component). + interesting question with caching of connected files. when rebuilding, let's say I changed only main.scss and the main.scss is connected to it, extend.scss latter be processed again or will its contents be taken from the cache? How to do what would be taken from the cache? - pepel_xD
    • + a question of adding, deleting a file .... - pepel_xD

    To speed up the compilation process as a whole, you can start using the gulp-load-plugins module. With it, you do not have to connect all the plug-ins, even if you don’t need them at the moment, just connect them during the execution of a specific task. That is, in the usual form, you launch the task styles , and all plug-ins are connected - from the minification of images to the babel transpiler. This plugin automatically collects the contents of packages.json and cuts off part of gulp- for use. As a result, for example, using gulp-uglify will look like this:

     const $ = require('gulp-load-plugins')() ... .pipe($.uglify({preserveComments: 'some'}))

    Instead:

     const uglify = require('gulp-uglify'); ... .pipe(uglify({preserveComments: 'some'}))

    To speed up the compilation process in particular, namely the style processing task, you can use gulp-newer .

    Here is a sample code that you can use. Pay attention to the line .pipe($.newer('.tmp/styles')) and intermediate saving in the tmp folder after running the SASS plugin. The $ sign is a hot plug-in connection with gulp-load-plugins .

     gulp.task('styles', () => { return gulp.src([ 'app/styles/**/*.scss', 'app/styles/**/*.css' ]) .pipe($.newer('.tmp/styles')) .pipe($.sass({ precision: 10, includePaths: require('node-bourbon').includePaths }).on('error', $.sass.logError)) .pipe($.rename({ suffix: '.min' })) .pipe(gulp.dest('.tmp/styles')) .pipe(gcmq()) .pipe($.if('*.css', $.cssnano({ discardUnused: false }))) .pipe($.autoprefixer({ browsers: "last 4 versions" })) .pipe($.size({title: 'styles'})) .pipe(gulp.dest('dist/styles')) .pipe(browserSync.stream({match: '**/*.css'})); });

    β€œThe question with the caching of files connected via @import ” - specify exactly what you mean. So far it seems to me that this part has nothing to do with galp Tasks.

    β€œIt’s also a matter of adding deleting files and rewriting URLs to files connected via css (pictures, fonts ...)” - similarly, explain what you mean.

    • Yes, I can not figure out whether to use gulp-cahed and gulp-remember ... i.e. without them how libsass works. let's say several imports are connected to the file, when compiling these imports will be processed anew or they are somehow cached, provided that only main.scss - pepel_xD
    • In sass, one way or another, everything will be tied to imports, if you want modularity. That at compilation only those files which changed were processed, just and is used gulp-newer . - Sasha Omelchenko
    • I use newer before dest to write only changed files, since besides main.scss there are also separate style files that are also processed but if they have not changed why write them .... - pepel_xD