miloszsobczak / less-src-replace

LESS plugin to copy all src files into one flatten structure.

less-src-replace

Copy all local src files into one flatten structure and replaces paths relatively in final CSS file.

First of all, big thanks for less-plugin-inline-urls, which allows me to understand Visitor concept in LESS.

During complex development you will be having a lot of static files (fonts, images) expanded to different directories. For instance you may have:

• bower directory
• npm directory
• local static files for different places in your app (ex. bundles in php symphony app)

Thanks to this plugin you will be able to keep expanded structure, but all of them are copied in flatten way for each LESS loaders.

Usage

Instalation

npm install --save-dev less-src-replace

API

less-src-replace ought to be called with Object with keys as follows:

dest

Type: String

Destination path where all static files should be copied into one directory.

{
    dest: __dirname + 'app/assets/static',
    ...
}

finalCSSPath

Type: String

Path of your final css needed to create relative src paths to all statics already copied.

{
    finalCSSPath: __dirname + 'app/assets/css',
    ...
}

This will cause that src paths in CSS would be looking like this: url: src('../static')

ignore

Type: Array optional

Array of paths that should be ignored during copy process.

{
    ignore: [__dirname + '/vendor']
    ...
}

This will cause that files in this directory won't be copied, path will keep relativity from final CSS.

Example Gulpfile

var getSrcFilesManager = require('less-src-replace');
    cssPath = __dirname + 'web/assets/css';

gulp.task('compileLESS', function(){
  gulp.src(['app/bundleName/stylesheets/loaderName.less'])
    .pipe(less({
        plugins: [new getSrcFilesManager({
            dest: __dirname + 'web/assets/static',
            finalCSSPath: cssPath,
            ignore: [__dirname + 'vendor']
        })]
    }))
    .pipe(gulp.dest(cssPath));
});

Nice to know

• if your src url is remote address (starts with "//" or "~://"), obviously it won't be used
• if your css has specific url used more than once, the file will be copied once as well
• all of your copied static files have some random number as a prefix in file to prevent naming conflicts (and refresh cache in browser)

So your final public structure can look like (all of them are not in ignore paths):

.
├── css
│   └── loaderName.css
└── static
    ├── 17089248960837722-fontawesome-webfont.ttf
    ├── 19754130695946515-logo_google.png
    ├── 30828309641219676-fontawesome-webfont.woff
    ├── 33208357309922576-fontawesome-webfont.woff2
    ├── 6342896649148315-fontawesome-webfont.svg
    └── 9496213241945952-fontawesome-webfont.eot

less-src-replace's Issues

Incorrect processing of URLs for font-face

As an example

Original code from bootstrap. Pay attention to the values of "src" on the lines that contains

• format('embedded-opentype')
• format('svg')

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
       url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}

Wrong result

• the line which contains "format('embedded-opentype')" does not have suffix "?#iefix"
• the line which contains "format('svg')" contains incorrect URL

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('css-assets/99718da6e37fa5ecd783c05da5776a27-glyphicons-halflings-regular.eot');
  src: url('css-assets/99718da6e37fa5ecd783c05da5776a27-glyphicons-halflings-regular.eot') format('embedded-opentype'), 
         url('css-assets/35235a935962823d0e87d0e906dbd4fc-glyphicons-halflings-regular.woff2') format('woff2'), 
         url('css-assets/2d3fceb5714523e1a20953bab085993b-glyphicons-halflings-regular.woff') format('woff'), 
         url('css-assets/88e79c0ab6e846d320a558acfced1a1f-glyphicons-halflings-regular.ttf') format('truetype'), 
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Expected

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('css-assets/99718da6e37fa5ecd783c05da5776a27-glyphicons-halflings-regular.eot');
  src: url('css-assets/99718da6e37fa5ecd783c05da5776a27-glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('css-assets/35235a935962823d0e87d0e906dbd4fc-glyphicons-halflings-regular.woff2') format('woff2'),
       url('css-assets/2d3fceb5714523e1a20953bab085993b-glyphicons-halflings-regular.woff') format('woff'),
       url('css-assets/88e79c0ab6e846d320a558acfced1a1f-glyphicons-halflings-regular.ttf') format('truetype'),
       url('css-assets/21406e5a5866a32b2cc21bb7f9083262-glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}