pipeline-compile-sass

Information

| Package | Description | Version| | ------------- |:-------------:| -----:| | pipeline-compile-sass| This pipeline compiles SCSS files and returns CSS files | 1.0.0 |

Overview

This pipeline assists the compilation of SCSS into CSS, while optionally allowing for autoprefixing and concatination.

Install

npm install pipeline-compile-sass --save-dev

Usage

var gulp = require('gulp');
var sassPipeline = require('pipeline-compile-sass');


gulp.task('default', function() {
  return gulp
    .src(['src/**/*.scss'])
    .pipe(sassPipeline.compileSASS());
});

//Usage with options
gulp.task('default', function() {
  return gulp
    .src(['src/**/*.scss'])
    .pipe(sassPipeline.compileSASS({concatCSS: true}));
});

Options

Pipeline options:

• config -> Object that contains the configuration.

  • autoprefix If you don't want to have your CSS rules prefixed set this property to false.

  • concatCSS If set to false the pipeline won't concatenate the files to generate a single CSS file and will output them to the same directory as the original files..

  • outputFileName If concatCSS is set to true, this value will be used to name the file. By default, the config is set to get the name of the package that consumes pipeline-compile-sass. So for example, it would end up named as your-project.css. If you set this value, do not suffix the string with '.css', as this is handled internally.

  • outputDirectory If concatCSS is set to true, . If you set this value, the .map and css files will be written to that directory. The default directory, if none is specified, is dest.

  • addSourceMaps If set to false source maps won't be generated for the compiled files. By default the pipeline will generate the source maps and store them next to the new generated files with an extension of .map .

  • plugins Gathers all of the specific configurations for the tasks used in the pipeline.

    • plugins.autoprefix Adds vendor specific prefixes automatically for the last 2 versions. Also, you can provide your own autoprefix configuration setting an object-- following this rules.

  Default:

  config = {
    autoprefix: true,
    concatCSS: false,
    outputFileName: '{package-name}.css',  //uses the name of the current package, from package.json
    outputDirectory: './dest/',
    addSourceMaps: true,
    plugins: {
      autoprefix: {browsers: ['last 2 versions']},
    }
  };

Results

This pipeline returns an object. This object receives a stream with the SASS files to compile, and you can call the compileSASS method to execute the compilation. After finishing the process you will have a folder named as config.output . This folder can contain files as follows:

• All of the CSS files generated; keeping the same folder structure from the source.

• The CSS rules that need vendor prefixes will be completed based on Autoprefixer.

• Source maps will be store in config.output/maps. This can be avoid setting config.addSourceMaps to false.

• If config.concatCSS is true a concat.css file will be generated.

• If config.outputFileName is set, that name will be used (and suffixed with '.css') instead of picking up the consuming package name as a default value. For example, the compiled file would be named as your-custom-value.css if you used 'your-custom-value'.

• If _config.outputDirectory is set, that name will be used to output .map and .css files, provided config.concatCSS is true.

LICENSE

Copyright (c) 2016 Kenzan http://kenzan.com

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.