https://github.com/nuintun/gulp-css
A gulp plugin for css transport and concat
https://github.com/nuintun/gulp-css
build-tool build-tools combine css gulp-plugin gulp-plugins minify web web-performance
Last synced: about 1 month ago
JSON representation
A gulp plugin for css transport and concat
- Host: GitHub
- URL: https://github.com/nuintun/gulp-css
- Owner: nuintun
- License: mit
- Created: 2015-05-09T09:25:24.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T00:17:22.000Z (over 2 years ago)
- Last Synced: 2025-03-28T00:09:59.204Z (about 2 months ago)
- Topics: build-tool, build-tools, combine, css, gulp-plugin, gulp-plugins, minify, web, web-performance
- Language: JavaScript
- Homepage: http://nuintun.github.io/gulp-css
- Size: 762 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-css
> A gulp plugin for css transport and concat
>
> [![NPM Version][npm-image]][npm-url]
> [![Download Status][download-image]][npm-url]
> [![Dependencies][david-image]][david-url]
### Usage
```js
const gulp = require('gulp');
const css = require('@nuintun/gulp-css');
const { join, relative } = require('path');
// Fixed css resource path
function onpath(path, property, file, wwwroot) {
if (/^[^./\\]/.test(path)) {
path = './' + path;
}
if (path.startsWith('.')) {
path = join(dirname(file), path);
path = relative(wwwroot, path);
path = '/' + path;
path = path.replace(/\\+/g, '/');
}
path = path.replace('assets/', 'online/');
return path;
}
// Task
gulp.task('default', function() {
gulp
.src('assets/css/**/*.css')
.pipe(css({ onpath: onpath }))
.pipe(gulp.dest('online/css'));
});
```
### API
#### css(options)
##### _options_
- root `String`
网站根目录。
- map `Function`
配置模块 `ID` 映射（返回的映射字符串必须符合文件路径规则，会同步更新模块 `ID` 和 输出文件名）。
- combine `Boolean|Function`
是否合并样式。
- onpath `Function`
样式文件中的资源文件路径处理回调函数。
- onbundle `Function`
模块合并完成后回调函数。
- plugins `Array[Object]`
自定义模块转换插件，有 `moduleDidLoaded, moduleDidParsed, moduleDidCompleted` 三个生命周期提供调用处理。
[npm-image]: http://img.shields.io/npm/v/@nuintun/gulp-css.svg?style=flat-square
[npm-url]: https://www.npmjs.org/package/@nuintun/gulp-css
[download-image]: http://img.shields.io/npm/dm/@nuintun/gulp-css.svg?style=flat-square
[david-image]: http://img.shields.io/david/nuintun/gulp-css.svg?style=flat-square
[david-url]: https://david-dm.org/nuintun/gulp-css