在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):ben-eb/gulp-uncss开源软件地址(OpenSource Url):https://github.com/ben-eb/gulp-uncss开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):Deprecation NoticeSince UnCSS is now a PostCSS plugin which can be combined with other CSS processing steps, there is little incentive to add a separate pass to your build step. Instead of using gulp-uncss, you can replicate the functionality by the following gulp task: var gulp = require('gulp');
var postcss = require('gulp-postcss');
var uncss = require('postcss-uncss');
gulp.task('default', function () {
var plugins = [
uncss({
html: ['index.html', 'posts/**/*.html', 'http://example.com']
}),
];
return gulp.src('./src/*.css')
.pipe(postcss(plugins))
.pipe(gulp.dest('./dest'));
}); Now you can add other plugins to complement UnCSS, such as cssnano. gulp-uncss
If you have any difficulties with the output of this plugin, please use the UnCSS tracker. InstallWith npm do:
ExampleSingle files, globbing patterns and URLs are all supported by gulp-uncss, and can be mixed and matched: var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('default', function () {
return gulp.src('site.css')
.pipe(uncss({
html: ['index.html', 'posts/**/*.html', 'http://example.com']
}))
.pipe(gulp.dest('./out'));
}); gulp-uncss can also be used in a pipeline that involves CSS pre-processing. Utilising many transforms on a single file is one of gulp's strengths: var gulp = require('gulp');
var uncss = require('gulp-uncss');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var nano = require('gulp-cssnano');
gulp.task('default', function () {
return gulp.src('styles/**/*.scss')
.pipe(sass())
.pipe(concat('main.css'))
.pipe(uncss({
html: ['index.html', 'posts/**/*.html', 'http://example.com']
}))
.pipe(nano())
.pipe(gulp.dest('./out'));
}); In just a few lines, we compiled SCSS source into a single file, removed unused CSS and minified the output! OptionsPlease see the UnCSS documentation for all of the options you can use. Some of them aren't as necessary when using gulp-uncss, because the CSS to analyse comes from the stream rather than the HTML files. The main options you will likely be using are: htmlType: An array which can contain an array of files relative to your ignoreType: Selectors that should be left untouched by UnCSS as it can't detect user interaction on a page (hover, click, focus, for example). Both literal names and regex patterns are recognized. timeoutType: Specify how long to wait for the JS to be loaded. Note that ContributingPull requests are welcome. If you add functionality, then please add unit tests to cover it. LicenseMIT © Ben Briggs |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论