gpt4 book ai didi

css - Gulpfile 关键 CSS 解决方案

转载 作者:太空宇宙 更新时间:2023-11-04 09:55:26 25 4
gpt4 key购买 nike

我在本地使用 Gulp 和 SASS 进行开发,为动态站点(即 CMS 驱动)编译 CSS。我正在尝试配置一个解决方案来编译全局与关键路径 CSS。到目前为止最好的想法是将我的主要 scss 文件拆分为特定于站点模板的文件(例如 templateA.scss、templateB.scss 等)然后,我可以逐个模板输出并缩小拉入站点的离散 CSS .

我的问题是关于如何优化配置 gulpfile.js 来促进这一点。我为“模板 A”(实际上是站点的主页)设置了一个任务。我还有 4-5 个将使用关键 CSS 的额外模板,并且希望获得有关如何最好地添加这些模板的反馈。

这是处理主页 SCSS 的上述任务:

gulp.task('home', function() {
return gulp.src([
'scss/home.scss'
])
.pipe(sass({
includePaths: [
paths.bower + '/foundation-sites/scss'
]
}))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(concat('home.css'))
.pipe(gulp.dest(paths.assets + '/styles/crpath-css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'))
.pipe(sync.stream());
});

还有 sass 任务,如您所见,它处理两个 scss 文件——一个用于“global css”,另一个用于“home css”。

gulp.task('sass', function() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('styles.dev.css'))
.pipe(gulp.dest('assets/styles'));

return gulp.src('scss/home.scss')
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('home.css'))
.pipe(gulp.dest('assets/styles/crpath-css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'));
});

我是否需要创建一个单独的任务来传输(和监视)每个 scss 文件?

如果需要,这里是完整的 gulpfile:

    var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var sync = require('browser-sync').create(); // create a browser sync instance.

var paths = {
'bower': 'bower_components',
'assets': 'assets'
};

var mypath = {
'mycss': 'css'
};

gulp.task('styles', function() {
return gulp.src([
'scss/app.scss'
])
.pipe(sass({
includePaths: [
paths.bower + '/foundation-sites/scss'
]
}))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(concat('styles.dev.css'))
.pipe(gulp.dest(paths.assets + '/styles'));
});

gulp.task('home', function() {
return gulp.src([
'scss/home.scss'
])
.pipe(sass({
includePaths: [
paths.bower + '/foundation-sites/scss'
]
}))
.pipe(autoprefixer({
browsers: ['last 2 versions', 'ie >=9']
}))
.pipe(concat('home.css'))
.pipe(gulp.dest(paths.assets + '/styles/crpath-css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'))
.pipe(sync.stream());
});

gulp.task('sass', function() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('styles.dev.css'))
.pipe(gulp.dest('assets/styles'));

return gulp.src('scss/home.scss')
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(concat('home.css'))
.pipe(gulp.dest('assets/styles/crpath-css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'));
});

gulp.task('minify-css', function() {
return gulp.src('assets/styles/crpath-css/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/styles/crpath-css'));
});

gulp.task('watch', function() {

sync.init({
injectChanges: true,
proxy: 'localhost/wesleypicotte'
});

gulp.watch('scss/**/*.scss', ['styles']);
gulp.watch('scss/**/*.scss', ['home']);
gulp.watch('scss/**/*.scss').on('change', sync.reload);
});

gulp.task('default', ['styles', 'home', 'minify-css']);

最佳答案

您可以在 src 声明中使用 Globs return gulp.src('./**/*.scss', '!**/_*.scss') 它应该捕获每一个不存在的文件不以 _ 为前缀。即 home.scssmain.scss 将被编译为 home.cssmain.css_buttons.scss 只有包含在另一个文件中才会被编译。所有文件都将输出到同一目录,因此如果您希望它们以不同的结构结束,您可能需要查看 https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-task-steps-per-folder.md

关于css - Gulpfile 关键 CSS 解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38774892/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com