Sass Gulpfile.js-如何在gulp.watch上获取.min.css、.css和.css.map文件? 我已经做了很多研究,但是在Drupal网站上,我有一个Zurb基金会的主题,我对它非常满意。我遇到的唯一问题是当我定制scss组件时。我正在使用gulp编译它,它正在重新创建css文件。然而,我想让它也给我min.css文件和css.map文件,但我似乎无法理解。我在gulpfile.js上尝试了许多不同的迭代,但这里是我的最新版本
它只生成css文件Sass Gulpfile.js-如何在gulp.watch上获取.min.css、.css和.css.map文件? 我已经做了很多研究,但是在Drupal网站上,我有一个Zurb基金会的主题,我对它非常满意。我遇到的唯一问题是当我定制scss组件时。我正在使用gulp编译它,它正在重新创建css文件。然而,我想让它也给我min.css文件和css.map文件,但我似乎无法理解。我在gulpfile.js上尝试了许多不同的迭代,但这里是我的最新版本,sass,gulp,minify,Sass,Gulp,Minify,它只生成css文件 var sassFiles = './themes/zurb_foundation/scss/**/*.scss', cssDest = './themes/zurb_foundation/css'; gulp.task('styles', function(){ gulp.src(sassFiles) .pipe(sourcemaps.init()) .pipe(autoprefixer()) .pipe(gulp.dest
var sassFiles = './themes/zurb_foundation/scss/**/*.scss',
cssDest = './themes/zurb_foundation/css';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sourcemaps.init())
.pipe(autoprefixer())
.pipe(gulp.dest(cssDest))
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest(cssDest))
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(rename({ extname: 'min.css' }))
.pipe(sourcemaps.write('./themes/zurb_foundation/css'))
.pipe(gulp.dest(cssDest))
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch(sassFiles, ['styles']);
})
我终于让它产生以下错误:
CssSyntaxError: /Users/USERNAME/Desktop/SITEFOLDER/ROOTDIR/themes/zurb_foundation/scss/foundation.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the
postcss-scss parser> 1 | // Foundation by ZURB
我想在这一点上,我的问题是我应该如何设置gulpfile来处理POSTSS scss解析 因此,首先我们将必要的包声明为
const
,因为这些值不应更改其赋值
const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const cssmin = require('gulp-cssmin');
然后我们编写一个名为sass的gulp任务,在该任务中,我们以.scss
格式搜索样式文件夹中的所有文件
我们检查并记录所有错误,我们创建sourcemaps,允许浏览器将SASS生成的CSS映射回原始源文件(如果您希望以这种方式使用.scss
/.CSS
)
然后,我们将新的.css
文件写入public/styles
文件夹
gulp.task('sass', function () {
return gulp.src('./styles/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/styles'));
});
gulp.task('minify-css', function(){
gulp.src(['./styles/*.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cssmin())
.pipe(concat('main.css'))
.pipe(rename("main.min.css"))
.pipe(gulp.dest('./public/styles'));
});
之后,我们编写了第二个名为minifycss
的吞咽任务
我们在styles文件夹中查找.css
格式的所有文件
首先,我们自动为所有css属性添加前缀。例如,如果您有一个css类,其中设置了:
user-select: none;
自动刷新将处理添加:
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
在此之后,我们缩小、连接并将新缩小的css文件命名为main.min.css
,然后将其保存在public/styles
文件夹中
gulp.task('sass', function () {
return gulp.src('./styles/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/styles'));
});
gulp.task('minify-css', function(){
gulp.src(['./styles/*.css'])
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(cssmin())
.pipe(concat('main.css'))
.pipe(rename("main.min.css"))
.pipe(gulp.dest('./public/styles'));
});
然后,我们编写一个名为build
的任务,以便通过在终端中简单地运行gulp build
来按时间顺序调用sass
和minify css
任务
gulp.task('build', [‘sass’, ‘minify-css’]);
通常,源映射调用围绕其他插件。请看两个正在运行的sourcemaps示例。你是说你没有任何.min.css输出到cssDest吗?如果你也分享了错误消息,也许有人可以帮你。对,根本没有.min.css。另外,正如我现在看到的,没有sass.logErrors返回。它在控制台中给出了通常的gulp.watch输出,但没有错误。我让它产生了我所包含的编辑错误。@user3558727我已经发布了一个答案,其中有一个示例和它所做工作的演练