npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pipeline-compile-less

v1.0.1

Published

Gulp pipeline to compile LESS files

Downloads

10

Readme

pipeline-compile-less

Information

| Package | Description | Version| | ------------- |:-------------:| -----:| | pipeline-compile-less| This pipeline compiles LESS files and returns CSS files | 1.0.1 |

Overview

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

Install

npm install pipeline-compile-less.git --save-dev

note: https://github.com/kenzanlabs/pipeline-compile-less/issues/7

Usage

var gulp = require('gulp');
var lessPipeline = require('pipeline-compile-less');


gulp.task('default', function() {
  return gulp
    .src(['src/**/*.less'])
    .pipe(lessPipeline.compileLESS());
});

//Usage with options
gulp.task('default', function() {
  return gulp
    .src(['src/**/*.less'])
    .pipe(lessPipeline.compileLESS({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-less. 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 LESS files to compile, and you can call the compileLESS 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) 2015 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.