• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

jsahlen/gulp-css-globbing: A Gulp plugin for globbing CSS import statements

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

jsahlen/gulp-css-globbing

开源软件地址(OpenSource Url):

https://github.com/jsahlen/gulp-css-globbing

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

gulp-css-globbing Build Status Dependency Status

A Gulp plugin for globbing CSS @import statements

Expands CSS @import statements containing globs with the full paths. Useful with pre-processors like Sass.

Heavily inspired by sass-globbing

DEPRECATION NOTICE: This library is no longer actively supported, as I currently have no need for it myself, and am having a difficult time finding the time/motivation to work on it. If you're interested in continuing development and making new releases, I'd be more than happy to transfer ownership of the NPM module to you – just drop me a line.

Install

Install gulp-css-globbing as a development dependency using npm:

npm install --save-dev gulp-css-globbing

Usage

var cssGlobbing = require('gulp-css-globbing');

gulp.task('css', function(){
  gulp.src(['src/styles.css'])
    .pipe(cssGlobbing())
    .pipe(gulp.dest('build/styles.css'));
});

Given a CSS file that looks like this:

@import url('components/*.css');

body {
  background: white;
}

The plugin would produce the following:

@import url('components/flex-embed.css');
@import url('components/media.css');

body {
  background: white;
}

Globbing is relative to the source file's path.

Options

gulp-css-globbing can be called with an options object:

gulp.task('css', function(){
  gulp.src(['src/styles.css'])
    .pipe(cssGlobbing({
      extensions: ['.css', '.scss'],
      ignoreFolders: ['../styles'],
      autoReplaceBlock: {
        onOff: false,
        globBlockBegin: 'cssGlobbingBegin',
        globBlockEnd: 'cssGlobbingEnd',
        globBlockContents: '../**/*.scss'
      },
      scssImportPath: {
        leading_underscore: false,
        filename_extension: false
      }
    }))
    .pipe(gulp.dest('build/styles.css'));
});

extensions

Type: String or Array

The file extensions to treat as valid imported files. If files are found that match the glob, but its extensions don't match this option, they will not be added to the resulting file.

Default: ['.css']

ignoreFolders

Type: String or Array

Folders gulp-css-globbing should ignore. Each folder should be relative to the source file.

Default: ['']

autoReplaceBlock

Type: String or Object

Search for a block of text which is replaced with the path to the files we want to glob. Path can be re-replaced each time we call gulp-css-globbing.

Default:

{
  onOff: false,
  globBlockBegin: 'cssGlobbingBegin',
  globBlockEnd: 'cssGlobbingEnd',
  globBlockContents: '../**/*.scss'
}

With the above settings, inside of your main .scss file you would only need to have this:

// cssGlobbingBegin
// this line can be blank
// cssGlobbingEnd

scssImportPath

Type: Object

Allows for default scss rules for writing scss import paths.

Default:

{
  leading_underscore: true, // underscores will NOT be removed
  filename_extension: true // extensions will NOT be removed
}

Leading Underscore

If leading_underscore is set to false, then the first leading underscore of a file name will be removed. Example: .../main/_main.scss becomes @import '../main/main.scss';

Filename Extension

If filename_extension is set to false, then the the extension of a file name will be removed. Example: .../main/_main.scss becomes @import '../main/_main';




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap