Menu icon Foundation
F6 - Sass compile to multiple css/js files

Hi all,

 

I am using the sass version of foundation and i was wondering if there is an easy way to compile to multiple/separate css and js files to the dist folder.

 

For example, at this moment i create a _custom.scss file in the scss folder, wich i import via @import'custom'; in the app.scss file. This compiles my custom.scss file to app.css which is distributed to the dist folder.

 

But, if i want a app.css file and a custom.css file compiled to my dist folder... How can i achieve this?
And also, if i want a app.js and a transitions.js file compiled to my dist folder... How can i achieve this?

 

So instead of putting al the code into one css file and one js file, i want to create multiple/separate files which can be loaded when needed. 

 

I already cheked the gulpfile.babel.js. But i cant figure out what to do to output multiple css and js files in the dist folder. The answer must be somewhere in here:

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // Comment in the pipe below to run UnCSS in production
    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

 

Any ideas would be great! Thanks!

 

compile to multiple css filescompile to multiple js filesSassseparate cssseparate js

Hi all,

 

I am using the sass version of foundation and i was wondering if there is an easy way to compile to multiple/separate css and js files to the dist folder.

 

For example, at this moment i create a _custom.scss file in the scss folder, wich i import via @import'custom'; in the app.scss file. This compiles my custom.scss file to app.css which is distributed to the dist folder.

 

But, if i want a app.css file and a custom.css file compiled to my dist folder... How can i achieve this?
And also, if i want a app.js and a transitions.js file compiled to my dist folder... How can i achieve this?

 

So instead of putting al the code into one css file and one js file, i want to create multiple/separate files which can be loaded when needed. 

 

I already cheked the gulpfile.babel.js. But i cant figure out what to do to output multiple css and js files in the dist folder. The answer must be somewhere in here:

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // Comment in the pipe below to run UnCSS in production
    //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

 

Any ideas would be great! Thanks!

 

Gavnosis almost 2 years ago

Did you ever find an answer to this? It's exactly what I was wondering how to do, too...