在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):stevelacy/gulp-stylus开源软件地址(OpenSource Url):https://github.com/stevelacy/gulp-stylus开源编程语言(OpenSource Language):JavaScript 90.4%开源软件介绍(OpenSource Introduction):gulp-stylus
Information
UsageInstall$ npm install --save-dev gulp-stylus Examples// include the required packages.
var gulp = require('gulp');
var data = require('gulp-data');
var stylus = require('gulp-stylus');
// include, if you want to work with sourcemaps
var sourcemaps = require('gulp-sourcemaps');
// Get one .styl file and render
gulp.task('one', function () {
return gulp.src('./css/one.styl')
.pipe(stylus())
.pipe(gulp.dest('./css/build'));
});
// Options
// Options compress
gulp.task('compress', function () {
return gulp.src('./css/compressed.styl')
.pipe(stylus({
compress: true
}))
.pipe(gulp.dest('./css/build'));
});
// Set linenos
gulp.task('linenos', function () {
return gulp.src('./css/linenos.styl')
.pipe(stylus({linenos: true}))
.pipe(gulp.dest('./css/build'));
});
// Include css
// Stylus has an awkward and perplexing 'include css' option
gulp.task('include-css', function() {
return gulp.src('./css/*.styl')
.pipe(stylus({
'include css': true
}))
.pipe(gulp.dest('./'));
});
// Inline sourcemaps
gulp.task('sourcemaps-inline', function () {
return gulp.src('./css/sourcemaps-inline.styl')
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/build'));
});
// External sourcemaps
gulp.task('sourcemaps-external', function () {
return gulp.src('./css/sourcemaps-external.styl')
.pipe(sourcemaps.init())
.pipe(stylus())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css/build'));
});
// Pass an object in raw form to be accessable in stylus
var data = {red: '#ff0000'};
gulp.task('pass-object', function () {
gulp.src('./sty/main.styl')
.pipe(stylus({ rawDefine: { data: data }}))
.pipe(gulp.dest('./css/build'));
});
// Use with gulp-data
gulp.task('gulp-data', function() {
gulp.src('./components/**/*.styl')
.pipe(data(function(file){
return {
componentPath: '/' + (file.path.replace(file.base, '').replace(/\/[^\/]*$/, ''))
};
}))
.pipe(stylus())
.pipe(gulp.dest('./css/build'));
});
/* Ex:
body
color: data.red;
*/
// Default gulp task to run
gulp.task('default', ['one', 'compress', 'linenos', 'sourcemaps-inline', 'sourcemaps-external', 'pass-object']); example folder.You can view more examples in theExtrasYou can access the original
Optionsaccord/stylusAll stylus options are passed toMITLICENSE |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论