gulp 连接 scss 与 css

Question

我目前想要改进我的 gulp 文件。我想在使用流的一项任务中将编译后的 scss 与 normalize.css 连接起来。其实我是这样做的

var gulp = require('gulp'),
runSequence = require('run-sequence'),
minifyCss = require('gulp-minify-css'),
sourcemap = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
scss = require('gulp-ruby-sass');

var path = {
  normalize: 'app/bower_components/normalize.css/normalize.css',
  dir: './tmp',
  scss: './app/styles/main.scss',
  css: './tmp/styles'
};

gulp.task('styles', function(callback) {
  runSequence('scss', 'css', callback);
});

gulp.task('scss',function() {
  return scss(path.scss)
   .on('error',function(err) {
      console.error('Error!', err.message);
   });
});

gulp.task('css', function() {
  return gulp.src([path.normalize, './tmp/styles/main.css'])
  .pipe(concat('main.css'))
  .pipe(sourcemap.init())
  .pipe(minifyCss())
  .pipe(sourcemap.write())
  .pipe(gulp.dest(path.css));
});

Answer 1

~~将 normalize.css 重命名为 normalize.scss;~~

~~在你的./app/styles/main.scss中使用：@import "../../app/bower_components/normalize.css/normalize.scss";~~

另见： https://github.com/chriseppstein/sass-css-importer，它允许您：

@import "CSS:some_folder/some_css_file"

有关最新版本的 libSass，请参阅：https://github.com/sass/libsass/pull/754#issuecomment-68139214

@import "file"; // load partial file.(s[ac]ss|css)
@import "file.css"; // create @import on top
@import url("file"); // create @import on top
@import url("file.css"); // create @import on top

所以 @import "../../app/bower_components/normalize.css/normalize" 应该可以工作并内联导入您的 CSS 文件。

Answer 2

您可以使用 merge 轻松完成此操作包裹：

var merge = require('merge2');

gulp.task('styles', function() {
  return merge(
    gulp.src(path.normalize), // our first stream
    scss(path.scss)           // our second stream
  )                           // merged at this point
  .pipe(concat('main.css'))
  .pipe(sourcemap.init())
  .pipe(minifyCss())
  .pipe(sourcemap.write())
  .pipe(gulp.dest(path.css));
})

您甚至可以为两个流初始化源映射，尝试 gulp-ruby-sass

中的 {sourcemap: true} 选项

更新

我仔细研究了您的问题并找到了一种始终包含源地图的方法：

var merge = require('merge2');
var postcss = require('gulp-postcss');
var csswring = require('csswring');

gulp.task('styles', function() {
    return merge(
        gulp.src(path.normalize)
            .pipe(sourcemaps.init()),
        scss(path.scss, {sourcemap: true})
            .pipe(sourcemaps.write())
    )
    .pipe(postcss([csswring]))
    .pipe(concat('main.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(path.css));
});

请注意 gulp-minify-css 有时 returns 有问题的源地图，这就是为什么我将其替换为 gulp-postcss

Answer 3

gulp 连接 JS 和 CSS

var gulp = require('gulp'); 
var sass = require('gulp-sass');
var concat= require('gulp-concat');
var minifyCss  = require('gulp-cssnano');

var uglify = require('gulp-uglify');
var pump = require('pump');


gulp.task('sass', function(){
  gulp.src(['css/**/*.scss' ,'css/**/*.css' ])
    .pipe(sass()) // Using gulp-sass
    .pipe(minifyCss())  
    .pipe(concat('style_all.css')) 
    .pipe(gulp.dest('build/css'))
});


gulp.task('compressJS', function (cb) {

 return gulp.src(['lib/*.js'])
        .pipe(concat('concat.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/js'))


});


gulp.watch('files-to-watch', ['tasks', 'to', 'run']);


gulp.task('default', ['sass' , 'compressJS'] , function(){
    console.log(':::default:::')
});



gulp.watch(['css/**/*.scss' ,'css/**/*.css' ], ['sass']);
gulp.watch(['lib/*.js'], ['compressJS']);

gulp 连接 scss 与 css

gulp concat scss with css

sass

gulp

更新