渲染2 scss并通过Gulp输出它们？
渲染2 scss并通过Gulp输出它们？
提问于 2018-03-15 16:21:05
我对Gulp还不熟悉，这个Gulp设置已经呈现为'main.scss‘，但是我想在这个Gulp中再添加一个名为'styles.scss’的scss文件，但是有点卡住了。如何插入这个新的scss？我应该为新的scss创建一个新的任务吗？嗯，我做了，但似乎我做错了。如何以正确的方式添加？
<pre><code>
"use strict";
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
sass = require('gulp-sass'),
maps = require('gulp-sourcemaps'),
del = require('del'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
htmlreplace = require('gulp-html-replace'),
cssmin = require('gulp-cssmin');
gulp.task("concatScripts", function() {
return gulp.src([
'assets/js/vendor/jquery-3.2.1.slim.min.js',
'assets/js/vendor/popper.min.js',
'assets/js/vendor/bootstrap.min.js',
'assets/js/functions.js'
])
.pipe(maps.init())
.pipe(concat('main.js'))
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task("minifyScripts", ["concatScripts"], function() {
return gulp.src("assets/js/main.js")
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('dist/assets/js'));
});
gulp.task('compileSass', function() {
return gulp.src("assets/css/main.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
return gulp.src("assets/css/main.css")
.pipe(cssmin())
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('watchFiles', function() {
gulp.watch('assets/css/**/*.scss', ['compileSass']);
gulp.watch('assets/js/*.js', ['concatScripts']);
})
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('clean', function() {
del(['dist', 'assets/css/main.css*', 'assets/js/main*.js*']);
});
gulp.task('renameSources', function() {
return gulp.src(['*.html', '*.php'])
.pipe(htmlreplace({
'js': 'assets/js/main.min.js',
'css': 'assets/css/main.min.css'
}))
.pipe(gulp.dest('dist/'));
});
gulp.task("build", ['minifyScripts', 'minifyCss'], function() {
return gulp.src(['*.html', '*.php', 'favicon.ico',
"assets/img/**", "assets/fonts/**"], { base: './'})
.pipe(gulp.dest('dist'));
});
gulp.task('serve', ['watchFiles'], function(){
browserSync.init({
server: "./"
});
gulp.watch("assets/css/**/*.scss", ['watchFiles']);
gulp.watch(['*.html', '*.php']).on('change', browserSync.reload);
});
gulp.task("default", ["clean", 'build'], function() {
gulp.start('renameSources');
});
</code></pre>任何帮助都很感激。谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-15 16:42:58
假设styles.scss与main.scss位于同一个文件夹中：
gulp.task('compileSass', function() {
// src changed so that all .scss files in folder are used
return gulp.src("assets/css/*.scss")
.pipe(maps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(maps.write('./'))
.pipe(gulp.dest('assets/css'))
.pipe(browserSync.stream());
});
gulp.task("minifyCss", ["compileSass"], function() {
// same as above : gulp.src takes a glob of all .css files in css folder
return gulp.src("assets/css/*.css")
.pipe(cssmin())
// name each file with the suffix, rest of name will be same as before
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/assets/css'));
});
gulp.task('clean', function() {
// changed css item so all .css files are deleted
del(['dist', 'assets/css/*.css*', 'assets/js/main*.js*']);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49304471
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号