Code Monkey home page Code Monkey logo

gulp-clean-css's Introduction

gulp-clean-css

Build Status Dependency Status devDependency Status Coverage Downloads NPM Version Awesome

gulp plugin to minify CSS, using clean-css

Regarding Issues

This is just a simple gulp plugin, which means it's nothing more than a thin wrapper around clean-css. If it looks like you are having CSS related issues, please contact clean-css. Only create a new issue if it looks like you're having a problem with the plugin itself.

Install

npm install gulp-clean-css --save-dev

API

cleanCSS([options], [callback])

options

See the CleanCSS options.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});

callback

Useful for returning details from the underlying minify() call. An example use case could include logging stats of the minified file. In addition to the default object, gulp-clean-css provides the file name and path for further analysis.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({debug: true}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
  .pipe(gulp.dest('dist'));
});

Source Maps can be generated by using gulp-sourcemaps.

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('minify-css',() => {
  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

License

MIT © 2020 scniro

gulp-clean-css's People

Contributors

claudiopro avatar dependabot[bot] avatar dmellstrom avatar hownowbrowncow avatar jessebluemr avatar madwizard-thomas avatar scniro avatar thedancingcode avatar troter avatar zbennett10 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gulp-clean-css's Issues

calc () issue

gulp-clean-css v.3.7.0

The following code does not work correctly in SASS mixin e.g:

@mixin angle-edge ($angle){
$angle-calc-top: calc(0% + #{$angle}vw); // bug here 0%

$clip-path-top: 0 $angle-calc-top, 100% 0;
$clip-path-bottom: 100% 100%, 0 100%;

 $clip-path: polygon($clip-path-top, $clip-path-bottom);
  clip-path: $clip-path;
}
.angle--top-left {
  @include angle-edge($angle: 2);
}

Output as:

.angle--top-left {
polygon(0 calc(0 + 2vw),100% 0,100% 100%,0 100%); /* 0 */
}

instead of

.angle--top-left {
polygon(0 calc(0% + 2vw),100% 0,100% 100%,0 100%); /* 0% */
}

p.s
Temporary solution used 0.1% instead of 0%

How to specify output file?

I can't seem to get this to happen.

gulp.task('minify-css', function() {
  return gulp.src('css/index.css')
    .pipe(cleanCSS({output: 'index.min.css'})) // Nope
    .pipe(size({title: 'styles'}))
    .pipe(gulp.dest('_includes/css/'));
});

does not work as per docs

Dear @scniro ,
I am unable to get gulp-clean-css to minify css files.
It does something to them, but it's not minification, on the contrary: for example, a minified file would get kind of 'unminified'.
At the same time, by using clean-css command in Bash, like
cleancss file.css -o file.min.css
I am getting a minified file, as expected.

What am I missing, how do I use your gulp-clean-css for minification?

How to display the current file ?

Hi,

I don't find how display the current file name/path it will process in my gulp process.
I use this code but the arguments "details" doesn't contains the current file.

cleanCSS({debug: true}, function(details) {
    console.log("CSS size before/after : " + details.stats.originalSize + "/" + details.stats.minifiedSize + "o [" + Math.round(details.stats.efficiency * 100) + "%]");
})

How I can add this file/path in my console.log ?

Thanks for in advance your help

URL rebasing is broken

URL rebasing got broken / changed between versions 2.0.6 ->2.2.0
Basically I use CSS files from multiple places in '/public/src' path and I minimize content and put it into 'public/out' folder. Unfortunately URLs are being rebased differently after version change.

Version 2.0.6 URL output: 'background:url(../src/elements/dj-menu-top/images/image.jpg)'
Version 2.2.0 URL output: 'background:url(../../../../elements/dj-menu-top/images/image.jpg)'

My gulp task

var OUTPIT_FOLDER_PATH = './public/out';
var IMPORT_STYLES = [
	"./public/src/elements/dj-nprogress/stylesheets/nprogress-wj.css",
	"./public/src/elements/dj-drawer/stylesheets/main.css",
        // There are multiple styles
];

var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');

gulp.src(IMPORT_STYLES)
        .pipe(concatCss('styles-' + versionNumber + '.min.css', {rebaseUrls: true}))
        .pipe(cleanCSS({ relativeTo: './public/out/', target: './public/out/', rebase: true }))
        .pipe(gulp.dest(OUTPIT_FOLDER_PATH));

Only one file being minified

Hey, thanks for this module. I'm not sure I'm missing something totally obvious but only one of my files is being minified. The directories are:

public/src/css/*.css (contains main.css)
pubilc/src/css/vendor/*.css (contains bootstrap etc)

Below are the relevant snippets:

const cssUserSources = 'public/src/css/*';
const cssVendorSources = 'public/src/css/vendor/*';
const cssUserOutputDir = 'public/dist/css';
const cssVendorOutputDir = 'pubilc/dist/css/vendor';

// css tasks
gulp.task('css', () => {
  gulp.src(cssVendorSources)
    .pipe(cleanCss({debug: true}, (details) => {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest(cssVendorOutputDir));

  gulp.src(cssUserSources)
    .pipe(cleanCss({debug: true}, (details) => {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
    .pipe(gulp.dest(cssUserOutputDir));
});

After my gulp file runs successfully, I check the dist/css folder and only see main.css is there, not any of the files in dist/css. However, when I run the gulp file I see the console logs from the above snippet for all the css files.

Node: v8.2.1
npm: 5.4.1

Missing dependencies

I'm not using sourcemaps, so I didn't install any of the related packages. However, this results in an error when just adding cleanCSS() to the gulp pipeline:

Error: Cannot find module 'source-map'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/adrian/dev/gamesurge/web/node_modules/gulp-clean-css/node_modules/clean-css/lib/stringifier/source-maps.js:1:88)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

After installing source-map:

Error: Cannot find module 'readable-stream'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/adrian/dev/gamesurge/web/node_modules/gulp-clean-css/node_modules/gulp-util/node_modules/multipipe/node_modules/duplexer2/index.js:1:76)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

After installing readable-stream it worked.

However, should it really be up to whoever uses this package to install these dependencies? IMO the package.json of gulp-clean-css should specify them as dependencies!

Callback only called for a single file

I have the following setup(minimum representation):

var cssPipeline = lazypipe()
      .pipe(function() {
        return $['if'](minifyCss, $.cleanCss({debug: true}, function(details) {
          console.log("Original size of " + details.path + ": " + details.stats.originalSize);
          console.log("Minified size of " + details.path + ": " + details.stats.minifiedSize);
        }));
      });

  var sources = ...; // Some array of globs that in total represents four CSS files

  return gulp.src(sources)
    .pipe($.sourcemaps.init())
    .pipe($.groupConcat(GROUP_CONCAT_CONFIG))
    .pipe($['if']('*.css', cssPipeline()))
    .pipe(sourceMapsWrite());
});

And the output is

Original size of app/css/admin.css: 194062
Minified size of app/css/admin.css: 189246

And that is all. All of the files that should be minified are, but the callback was only called once. I actually don't need this callback, was just interested in the output, but I thought you might want to fix this for other users

Accessing the gulp-clean-css via the gulp-load-plugins

I am having an issue accessing the gulp-clean-css via the gulp-load-plugins.

For example:

    var $ = require('gulp-load-plugins')({ lazy: true }),
    ...
    return gulp
            .src(cssPath)
            .pipe($.size())
            .pipe($.clean-css())

I tried both using $.clean-css() or $.cleancss(), but was unsuccessful.

Would you please help me with this?

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

After upgrade to 3.1.0 my Gulp file fails as below:

node_modules/gulp-clean-css/index.js:14
  let transform = function (file, enc, cb) {
  ^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/artem/Workspace/etraxis/etraxis/gulpfile.js:14:16)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)

I'm not an expirienced frontend developer, I'm a backend guy, who uses Gulp to maintain LESS/JS assets in Symfony projects. I understand use replaced vars with lets but not sure how to deal with your module now.

Any help will be appreciated. Thank you!

Node 6 support

Im getting this error after the new Node 6 update:

path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.dirname (path.js:1324:5)
    at /.../node_modules/clean-css/lib/utils/input-source-map-tracker.js:191:56
    at Array.forEach (native)
    at trackContentSources (/.../node_modules/clean-css/lib/utils/input-source-map-tracker.js:188:20)
    at InputSourceMapStore.trackLoaded (/.../node_modules/clean-css/lib/utils/input-source-map-tracker.js:255:3)
    at fromString (/.../node_modules/clean-css/lib/utils/input-source-map-tracker.js:32:8)
    at InputSourceMapStore.track (/.../node_modules/clean-css/lib/utils/input-source-map-tracker.js:236:5)
    at Object.%

rebase to absolute relative to root fails since 2.1.2

Related to this modification (commit 3104238, line 33 to 38)

I'm rebasing relative paths in css files located in bower_components package folders.

For instance, an url in font-awesome package might look like:
url(../fonts/fontawesome-webfont.eot?v=4.7.0);

It is then rebased to its absolute path relative to the app's root, like this:
url(/bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0);

Now that the code on lines [33..38] is removed, the output is not the same when using theses options:

.pipe(cleanCSS({
      rebase: true,
      target: './',
      root: './'
    }))

The output looks like this instead:
url(/Users/jybleau/Bitbucket/fonts/fontawesome-webfont.eot?v=4.7.0)

Seems cssFile[file.path] is used by clean-css to know the complete absolute path to the css file being processed.
In the example above, it's missing the part there: /Bitbucket/..??../fonts/

If I paste back lines [33..38] in version 2.1.2+, it works fine again.

Thanks

PS: the reason for this rebasing is because all "vendors" css are merged together but the files they refer to are left in bower_components and used from there. It's a way of not having to copy all fonts and images files from each packages to a common location.

Release versions, tags and CHANGELOG do not match

At the moment the latest release is 2.3.2 but the CHANGELOG says 2.3.1. (I think the content of the 2.3.1 section was meant to be 2.3.2 and for 2.3.1 a CHANGELOG entry is missing) Also the GitHub tags and releases do not exist.

Nevertheless a nice package. :-)

ReferenceError: cleanCSS is not defined

Hi, new to gulp still trying to get my head around it. Been struggling with this for ages, does anyone have any ideas?

terminal output:

[18:10:45] Starting 'minify-css'...
[18:10:45] 'minify-css' errored after 17 ms
[18:10:45] ReferenceError: cleanCSS is not defined

Package.json

{
  "name": "simplestarter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^1.3.7",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^2.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "^4.3.11"
  }
}

gulpfile.js

var gulp = require('gulp');

var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');

var serve = require('browser-sync');
//var watch = require('gulp-watch');

//Define Server Task.
gulp.task('serve', function () {
	gulp.task('serve', function() {
	    serve({
	        server: {
	            baseDir: 'app/'
	        }
	    });
		gulp.watch("app/*.html").on('change', serve.reload);
	});
});

//Minify any CSS and place in app/css
gulp.task('minify-css', function() {
	return gulp.src([
		'bower_components/foundation-sites/dist/foundation.css', 
		'bower_components/font-awesome/css/font-awesome.js',
		'src/css/*.css'
	])
	.pipe(cleanCSS())
    .pipe(size({title: 'styles'}))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('app/css/'));
});

//Minify + Concat any Vendor JS and our own JS files.

gulp.task('scripts', function() {
	return gulp.src([
		'bower_components/jquery/dist/jquery.js',
		'bower_components/foundation-sites/dist/foundation.js',
		'bower_components/what-input/what-input.js'	
	])
	.pipe(concat('main.js'))
	.pipe(rename({suffix: '.min'}))
	.pipe(uglify())
	.pipe(gulp.dest('app/js'));
});

gulp.task('default', ['scripts', 'minify-css', 'serve']);

Sourcemaps mapping issue in 2.2.2

The following was working in version 2.1.1, but does not work in 2.2.2. The sourcemap is still inlined in my minified file, but it seems like the mappings may be incorrect as the browser fails to map the styles back to the original scss files. I'm using gulp-sourcemaps.

.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.cleanCss({
    target: options.css_min_dir,
}))
.pipe(plugins.sourcemaps.write(undefined, {
    sourceRoot: path.join(path.relative(options.css_min_dir, options.css_dir), path.sep)
}))

My pipeline is as follows:

assets/scss -> assets/css -> assets/css/min

I compile scss files using gulp-compass, then I minify the resulting css using gulp-clean-css. I use gulp-sourcemaps to load the sourcemaps produced by gulp-compass before gulp-clean-css, and write the resultant sourcemap inline in the minified css file.

is not in the SourceMap error

/some/path/website/node_modules/source-map/lib/source-map-consumer.js:703
        throw new Error('"' + aSource + '" is not in the SourceMap.');
        ^

Error: "/node_modules/bourbon-neat/app/assets/stylesheets/grid/_box-sizing.scss" is not in the SourceMap.
    at SourceMapConsumer_sourceContentFor [as sourceContentFor] (/some/path/website/node_modules/source-map/lib/source-map-consumer.js:703:15)
    at SourceMapGenerator.<anonymous> (/some/path/website/node_modules/source-map/lib/source-map-generator.js:229:42)
    at Array.forEach (native)
    at SourceMapGenerator_applySourceMap [as applySourceMap] (/some/path/website/node_modules/source-map/lib/source-map-generator.js:228:34)
    at applySourceMap (/some/path/website/node_modules/vinyl-sourcemaps-apply/index.js:27:15)
    at /some/path/website/node_modules/gulp-clean-css/index.js:65:25
    at whenSourceMapReady (/some/path/website/node_modules/clean-css/lib/clean.js:139:16)
    at /some/path/website/node_modules/clean-css/lib/clean.js:151:18
    at fromString (/some/path/website/node_modules/clean-css/lib/utils/input-source-map-tracker.js:33:10)
    at InputSourceMapStore.track (/some/path/website/node_modules/clean-css/lib/utils/input-source-map-tracker.js:236:5)

rename

Hi i wanna minify my css file. Module work fine, but i wanna to have in the end renamed file (for example all.min.css
this module can provide such function?

gulp task does not work

Hello
I have been using a yeoman/generator-chrome-extension.
When I run the build, clean-css related errors will occur.
sourcemap of bootstrap.css seems to cause.

how do I resolve this problem?
regards.

html

<html>
  <head>
    <meta charset="utf-8">
    <!-- build:css styles/popup-vendor.css -->
    <!-- bower:css -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css styles/main.css -->
    <link href="styles/main.css" rel="stylesheet">
    <!-- endbuild -->
  </head>
  <body>
  .....

gulpfile.babel.js: line 52-61

gulp.task('html',  () => {
  return gulp.src('app/*.html')
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.sourcemaps.init())
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cleanCss({compatibility: '*'}))) // <- this line 
    .pipe($.sourcemaps.write())
    .pipe($.if('*.html', $.htmlmin({removeComments: true, collapseWhitespace: true})))
    .pipe(gulp.dest('dist'));
});

command

$ gulp build
[13:47:48] Requiring external module babel-register
(node:6899) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[13:47:49] Using gulpfile ~/works/jsworks/extension-example/gulpfile.babel.js
[13:47:49] Starting 'build'...
[13:47:49] Starting 'lint'...
[13:47:49] Finished 'lint' after 254 ms
[13:47:49] Starting 'chromeManifest'...
[13:47:49] Finished 'chromeManifest' after 190 ms
[13:47:49] Starting 'html'...
[13:47:49] Starting 'images'...
[13:47:49] Starting 'extras'...
fs.js:634
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '/Users/vertuxx/works/jsworks/extension-example/app/styles/bootstrap.css.map'
    at Error (native)
    at Object.fs.openSync (fs.js:634:18)
    at Object.fs.readFileSync (fs.js:502:33)
    at fromSource (/Users/vertuxx/works/jsworks/extension-example/node_modules/clean-css/lib/utils/input-source-map-tracker.js:84:30)
    at InputSourceMapStore.track (/Users/vertuxx/works/jsworks/extension-example/node_modules/clean-css/lib/utils/input-source-map-tracker.js:237:5)
    at Object.whenDone (/Users/vertuxx/works/jsworks/extension-example/node_modules/clean-css/lib/clean.js:145:44)
    at processNext (/Users/vertuxx/works/jsworks/extension-example/node_modules/clean-css/lib/imports/inliner.js:105:13)
    at importFrom (/Users/vertuxx/works/jsworks/extension-example/node_modules/clean-css/lib/imports/inliner.js:79:
$ 

Upgrading causes gigantic source maps.

I upgraded from 2.0.13 to 3.9.2 and now my sourcemaps are huge for the minified version. In package.json I have

"gulp-clean-css": "^3.9.2"
"gulp-sourcemaps": "^2.6.4"

Here is an excerpt from my gulp

gulp.task('build-css',() => {
	var streams = merge();
	buildPaths.forEach(function(sitepath){
		streams.add(gulp.src(path.join(rootPath, sitepath.cssinput))
	    .pipe(sourcemaps.init())
	    .pipe(sass()
	        .on('Error:', sass.logError))
	    .pipe(autoprefixer({
	        browsers: ['last 2 versions'],
	        cascade: false
	    }))
	    .pipe(sourcemaps.write('./'))
	    .pipe(chmod(777))
	    .pipe(gulp.dest(path.join(rootPath,sitepath.cssoutput))))
	});
	return streams;
});

gulp.task('build-min-css', ['build-css'],function(){
	var streams = merge();
	buildPaths.forEach(function(sitepath){
		streams.add(gulp.src(path.join(rootPath,sitepath.cssoutput + '/application' + sitepath.id + '.css'))
        .pipe(sourcemaps.init())
        .pipe(cleancss())
        .pipe(rename({extname: '.min.css'}))
        .pipe(sourcemaps.write('./'))
        .pipe(chmod(777))
        .pipe(gulp.dest(path.join(rootPath, sitepath.cssoutput))));
	});
	return streams;
});

The min sourcemaps were 1.3 mb now they are 130 mb.

Add info on how to minify css

Since many users just want to minify without clean-css transformations (compatibility, etc), it would be great to see pure minification in the package example.

Error: Cannot find module 'gulp-concat'

I hit this build error. It looks like gulp-concat was added to index.js but still remains in devDependencies. From this recent commit: 3104238#diff-168726dbe96b3ce427e7fedce31bb0bcR7

I can add gulp-concat to my project's devDependencies to get around this but others may hit the same issue. Perhaps gulp-concat should be a strict dependency.

Error: Cannot find module 'gulp-concat'

Thanks for the project, and keep up the good work :)

How to remove spaces and blank lines in css file with gulp-clean-css ?

In the past I used gulp-minify-css to remove spaces and black lines.
Here is my gulpfiles.js code segment.

gulp.task('css', function () {
  return gulp.src('./css/**/*.css')
    .pipe(minifycss({
            compatibility: 'ie7'
        }))
    .pipe(gulp.dest('./build'));
});

It worked well.

Now I try to use gulp-minify-css replace with gulp-clean-css.

gulp.task('css', function () {
  return gulp.src('./css/**/*.css')
    .pipe(plumber())
    .pipe(autoprefixer({
        browsers: ['> 5%']
    }))
    .pipe(cleanCSS({
        advanced: false,
        compatibility: '',
        keepBreaks: false,
        keepSpecialComments: 0
    }))
    .pipe(gulp.dest('./build'));
});

It can not achieve the desired effect. Where did I make the mistake?
What should I do?

[Question] Production Ready?

Hi @scniro!

I've been following this project closely since our team initially used it before it became depreciated and you took over and I applaud you for your work! Sorry for opening an issue to ask this (I kinda wish GitHub had some sort of a message board/communication feature) but what is the current state of the plugin? Would it be recommended for production use yet? I know you've been hard at work getting some of the dust and bugs off. Thanks!

Not rebasing url()

Below is my css bundling task. None of the url() references have been rebased for the destination library. I tested running cleancss (on the one file that has relative url() statements in it) from the command line and it rebased the urls correctly. Seems gulp-clean-css is not sending the correct params for rebasing. I even tried to set those options (i.e. cleanCss({relativeTo: './lib'})) myself but it still didn't work. The url() paths are not changed at all.

var gulp = require('gulp');
var concat = require("gulp-concat"),
    rename = require("gulp-rename"),
    uglify = require("gulp-uglify");
    sequence = require("gulp-sequence"),
    cleanCSS = require('gulp-clean-css');


gulp.task('bundleCSS', function () {
    return gulp.src([
                './Content/bootstrap.css',
                './Content/entypo.css',
                './Content/dricofont.css',
                './Content/font-awesome.css',
                './node_modules/primeui/primeui-ng-all.css',
                './node_modules/primeui/themes/redmond/theme.css',
                './Content/site.css'
    ])
        .pipe(cleanCSS())
        .pipe(concat('cssbundle.min.css'))
        .pipe(gulp.dest('./lib'));
});

version 2.4.0 contain a breaking changes

This version upgrades clean-css to version 4.x - which is a breaking change upgrade.
As it has been released as minor update it broke my code.

You should remove version 2.4.0 from registry or soon more projects would start failing.

clean-css options not working

I'm having trouble disabling a specific rule for clean-css using gulp-clean-css, when I try my config out using the web interface: https://jakubpawlowicz.github.io/clean-css/ it works as intended but when I try it using gulp it doesn't work.

Here's the relevant gulp code:

gulp.src(['./fonts/*.css'])
    .pipe(concat('fonts.css'))
    .pipe(cleanCSS({
        level: {
            1: {
                normalizeUrls: false
            }
        }
    }))
    .pipe(gulp.dest(BUILD_DIRECTORY_BASE + '/assets/css'));

I also tried:

gulp.src(['./fonts/*.css'])
    .pipe(concat('fonts.css'))
    .pipe(cleanCSS({
        normalizeUrls: false
    }))
    .pipe(gulp.dest(BUILD_DIRECTORY_BASE + '/assets/css'));

As a troubleshooting step I also noticed that setting the level to 0 (which is supposed to disable all optimization) does nothing and still minifies the css

gulp.src(['./fonts/*.css'])
    .pipe(concat('fonts.css'))
    .pipe(cleanCSS({
        level: 0
    }))
    .pipe(gulp.dest(BUILD_DIRECTORY_BASE + '/assets/css'));

I'm using gulp-clean-css 3.9.3 on node.js 9.5.0

Multi-file merge bug

gulp.src([
'./simple-line-icons.css',
'./font-awesome.css',
'./bootstrap.css'
]).pipe(minifyCss()))

source:
………………
url('fonts/fontawesome-webfont.woff2?v=4.4.0')
…………

compress:

………………
font-awesome --
url('../../fonts/fontawesome-webfont.woff2?v=4.4.0')
…………

The current file path is attached

cssFile[file.path] = {styles: file.contents.toString()};

Hello,

After upgrading to version 2.1.0 we are starting receiving the following error

/Users/gvnn/Projects/thick/make-wally-thick/node_modules/gulp-clean-css/index.js:31
    cssFile[file.path] = {styles: file.contents.toString()};
                                               ^

TypeError: Cannot read property 'toString' of null
    at DestroyableTransform.transform [as _transform] (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/gulp-clean-css/index.js:31:48)
    at DestroyableTransform.Transform._read (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/readable-stream/lib/_stream_transform.js:159:10)
    at DestroyableTransform.Transform._write (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/readable-stream/lib/_stream_transform.js:147:83)
    at doWrite (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/readable-stream/lib/_stream_writable.js:347:64)
    at writeOrBuffer (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/readable-stream/lib/_stream_writable.js:336:5)
    at DestroyableTransform.Writable.write (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/readable-stream/lib/_stream_writable.js:274:11)
    at Transform.ondata (_stream_readable.js:555:20)
    at emitOne (events.js:96:13)
    at Transform.emit (events.js:188:7)
    at readableAddChunk (_stream_readable.js:176:18)
    at Transform.Readable.push (_stream_readable.js:134:10)
    at Transform.push (_stream_transform.js:128:32)
    at afterTransform (_stream_transform.js:77:12)
    at TransformState.afterTransform (_stream_transform.js:54:12)
    at Transform.stream._transform (/Users/gvnn/Projects/thick/make-wally-thick/node_modules/gulp-postcss/index.js:19:14)
    at Transform._read (_stream_transform.js:167:10)

We pipe to clean-css right after autoprefixer, like this

var b = gulp.src(sources)

    b = b.pipe(sasspipe)
        .pipe(postcss([
            autoprefixer({ browsers: ['last 3 versions', '> 5%', 'IE >= 0']})
        ]));

    if(!debug) {
        b = b.pipe(cleanCSS({ compatibility: 'ie8', processImport: false }));
    }

    return b
        .pipe(gulp.dest(dest))
        .pipe(module.size());

Media queries removed

Media queries are removed after minifying. In this issue I saw @lindevs mention the same problem, but did not get an answer, I think he wasn't understood clearly.

I have gulp-clean-css 3.0.3

My task:

cleanCSS = require('gulp-clean-css')
gulp.task('min-css', function () {
    return gulp.src(['CSS/**/*.css'])
    .pipe(cleanCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('CSS/min/'))
})

"File already exists" error when processing CSS before minification

Since version 2.1.1, when using gulp-clean-css piped after gulp-sass, like in the example below, I'm getting this error: Error: EEXIST: file already exists, mkdir....

const gulpCleanCSS = require('gulp-clean-css');
const gulpSass = require('gulp-sass');

exports.fn = function(gulp) {
    gulp
        .src(['assets/sass/**/*'])
        .pipe(gulpSass())
        .pipe(guplCleanCSS())
        .pipe(gulp.dest('app/public/css'))
};

Probably this errors occurs everytime that gulp-clean-css is not the first processing task.

May I be helpful somehow in order to fix this?

Thank you in advance.

Using gulp-clean-css, font file paths specified in url() setting a wrong path

Hi,

With the recent changes, gulp build that using gulp-clean-css having issues with url() path values.
Example, this below
url('../fonts/glyphicons-halflings-regular.woff2')
is converted to below,
url('scripts/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2')
Where, scripts is my library folder.
in the minified css.

I guess, this related to rebaseTo changes?

map.sources are already a relative path

Why is it that you are trying to make a relative path for sources.
In my case I'm receiving the correct relative path already on clean css callback
´´´
// src === "../sass/originalstylesheet.scss"
´´´
so when the map executes I get a source like
´´´
"../../../../../sass/wu-about-us-timeline.scss"
´´´
Is there a way to tell clean-css to return an absolute path for this?
Is it that clean-css changed or am I doing something wrong?

Rebase doesn't work on files outside the Gulp workspace

When processing files that are located outside the folder that your gulpfile.js is located:

return gulp.src(
[
'../base/fontawesome/css/font-awesome.css'
... etc ... etc
])
.pipe(cleanCss())
.pipe(gulp.dest('../default/css.dev/'));

The rebase function doesn't work. The above CSS example file contains:

  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

That URL should be rebased to:

  src: url('../../base/fontawesome/fonts/fontawesome-webfont.eot?v=4.7.0');

But it is not, the path seems to remain untouched.

SyntaxError: Use of const in strict mode.

Seems similar to 41 but not solved by 3.1.1.

The plugin does not throw an error in local development (Windows), but does when building in production by Travis CI (Linux):

/home/travis/build/inwardmovement/inwardmovement.github.io/node_modules/gulp-clean-css/index.js:3
const applySourceMap = require('vinyl-sourcemaps-apply');
^^^^^
SyntaxError: Use of const in strict mode.
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/home/travis/build/inwardmovement/inwardmovement.github.io/gulpfile.js:3:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
The command "gulp" exited with 8.

I use "gulp-clean-css": "^3.9.2" and npm 5.6.0
Any idea how can I work around this?

the path of image

before:
background: url(../../../img/index_sprite.png) no-repeat -10px -40px;
after:
background: url(../img/index_sprite.png) no-repeat -10px -40px;

gulp-sourcemap not working after using clean css.

Hello there,

I've been trying for to minify css using gulp-clean-css with sourcemap but it's not working. Line numbers are wrong while I'm trying to debug in chrome developers tool but If I skip the cleancss() part, it's working as expected. Is this issue of gulp-clean css? or what? below is my gulp file.

Thanks

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps= require("gulp-sourcemaps");
var cleancss = require('gulp-clean-css');

gulp.task('bundle:less', function() {
console.log(less);
return gulp.src('themes/'+theme+'/css/style.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(cleancss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('www/themes/'+theme+'/css'));
});

gulp.task("default",['bundle:less']);

Spaces removed from :not statement.

Hello,

Ive noticed an issue with this package where spaces are removed from :not statements.
Im not 100% sure if this an issue with the gulp wrapper or the clean-css package it wraps.

Basically if i have css:

button {
    &:not(.gmap &){
        @include button();
    }
}

The compiled css becomes (notice the space removed from .gmap and button:

button:not(.gmapbutton){/* the mixin css */}

When using the following gulp process:

return gulp.src(cssPath + '/**/*.css')
        .pipe(groupMediaQueries())
        .pipe(cleanCss({
            compatibility: ie8,
            level: 2
        }))
        .pipe(gulp.dest(cssPath));

v3.3.1 breaks @import pathing

It appears as though the latest version of gulp-clean-css has a different behaviour with how it handles @import paths using the inline: ['none'] option.

We unintentionally installed v3.3.1 by using the package.json devDependency declaration: "gulp-clean-css": "^3.2.0".
We fixed the issue locally by changing our package.json devDependency declaration to exact: "gulp-clean-css": "3.2.0".

See screenshots below

[v3.2.0] expected result:
v3 2 0

[v3.3.1] unexpected result:
v3 3 1

Sourcemaps in stream have their locations changed

We have run into a problem with our sourcemaps not being found when we run them through gulp-clean-css 2.0.7 or higher. We have tested this using node 5.10.1 and 6.2.2 and we have tested every version of gulp-clean-css from 2.0.7 - 2.0.12. The following error occurs in every case:

gulp build:client --prod
Mode:   Production
[10:25:52] Using gulpfile .../ui/gulpfile.js
[10:25:52] Starting 'clean:client'...
[10:25:52] Finished 'clean:client' after 8.15 ms
[10:25:52] Starting 'build:client'...
fs.js:634
  return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                 ^

Error: ENOENT: no such file or directory, open '.../ui/templates/build/styles/bootstrap-4cc48fd547.css.map'
  at Error (native)
  at Object.fs.openSync (fs.js:634:18)
  at Object.fs.readFileSync (fs.js:502:33)
  at fromSource (.../ui/node_modules/clean-css/lib/utils/input-source-map-tracker.js:84:30)
  at InputSourceMapStore.track (.../ui/node_modules/clean-css/lib/utils/input-source-map-tracker.js:237:5)
  at Object.whenDone (.../ui/node_modules/clean-css/lib/clean.js:145:44)
  at processNext (.../ui/node_modules/clean-css/lib/imports/inliner.js:105:13)
  at importFrom (.../ui/node_modules/clean-css/lib/imports/inliner.js:79:10)
  at ImportInliner.process (.../ui/node_modules/clean-css/lib/imports/inliner.js:38:10)
  at .../ui/node_modules/clean-css/lib/clean.js:120:41
  at _combinedTickCallback (internal/process/next_tick.js:67:7)
  at process._tickCallback (internal/process/next_tick.js:98:9)

We are taking multiple modules and building them out as separate files. Each file has it's own .map file and this is the one that seems to be not found. They end up in /ui/public/build/styles/... not the templates folder as see above.

Below is the gulp task and package.json. This is a large older code base, so some of it might be a little convoluted. ;)

var buildClient = lazypipe()
    .pipe($.useref,
        { searchPath: config.paths.files.libs },
        lazypipe().pipe($.sourcemaps.init, {loadMaps: true}),
        lazypipe().pipe(function() {
                return $.if('.less', styles()());
            }
        ))
    .pipe($.plumber)
    .pipe(function() {
        return $.if('*.js',scripts()());
    })
    .pipe(function() {
        return $.if('*.css',styles()());
    })
    .pipe($.sourcemaps.write, './')
    .pipe($.revReplace)
    .pipe(gulp.dest, config.paths.folders.public)
    .pipe($.rev.manifest, config.paths.files.manifest,{
        base: process.cwd() + '/' + config.paths.folders.build,
        merge: true
    })
    .pipe(gulp.dest, config.paths.folders.build);

gulp.task('build:client', ['clean:client'], function() {
    var isCompiled = options.prod && fs.existsSync(config.paths.files.manifest);
    var excludeFiles = function(filename) {
        if(_.includes([
                'build/scripts/simplifile.js',
                'build/scripts/vendor.js',
                'build/styles/vendor.css'
            ],filename)) {
            return 'excluded-text-that-should-not-be-found-in-the-file.js';
        }

        return filename;
    };

    return gulp.src(config.paths.files.views.main)
        .pipe($.if(isCompiled, $.revReplace({
            manifest: gulp.src('./' + config.paths.files.manifest),
            modifyUnreved: excludeFiles
        })))
        .pipe(buildClient())
});

function styles(templateName) {
    var isTemplateName = typeof templateName !== 'undefined';

    return lazypipe()
        .pipe(function() {
            return $.if('*.less', $.less({
                paths: ["src"],
                customFunctions: sfColorFunctions
            }).on('error', $.util.log));
        })
        .pipe(function() {
            return $.if(isTemplateName, $.concat(templateName + '.css'));
        })
        .pipe(function() {
            return $.if(options.prod, $.cleanCss())
        })
        .pipe(function() {
            return $.if(options.prod, $.rev())
        });
}
"dependencies": {
    "cheerio": "0.20.0",
    "colors": "0.6.2",
    "console.table": "0.7.0",
    "del": "2.2.1",
    "foreman": "0.4.2",
    "gulp-debug": "0.3.1",
    "gulp-filter": "0.5.1",
    "gulp-footer": "1.0.5",
    "gulp-header": "1.8.7",
    "gulp-load-plugins": "1.2.4",
    "gulp-rename": "1.2.2",
    "gulp-rev": "7.1.0",
    "gulp-rev-replace": "0.4.3",
    "gulp-sourcemaps": "0.4.6",
    "gulp-tap": "0.1.3",
    "gulp-useref": "3.1.0",
    "http-proxy": "1.14.0",
    "jsonfile": "2.3.1",
    "lazypipe": "1.0.1",
    "lodash": "4.13.1",
    "run-sequence": "0.3.7",
    "wiredep": "4.0.0",
    "wrench": "1.5.9",
    "yargs": "3.32.0"
  },
  "devDependencies": {
    "bower": "1.7.9",
    "eslint": "2.13.1",
    "eslint-config-angular": "0.5.0",
    "eslint-plugin-angular": "1.3.0",
    "event-stream": "3.3.4",
    "git-guppy": "=1.2.1",
    "gulp": "3.9.1",
    "gulp-cached": "1.1.0",
    "gulp-clean": "0.3.2",
    "gulp-clean-css": "2.0.7",
    "gulp-concat": "2.6.0",
    "gulp-concat-sourcemap": "1.3.1",
    "gulp-conflict": "0.4.0",
    "gulp-data": "1.2.1",
    "gulp-debug": "0.3.1",
    "gulp-directory-map": "0.1.3",
    "gulp-eslint": "2.1.0",
    "gulp-file": "0.3.0",
    "gulp-flatten": "0.2.0",
    "gulp-gitmodified": "1.1.1",
    "gulp-htmlmin": "1.3.0",
    "gulp-if": "2.0.1",
    "gulp-inject": "1.5.0",
    "gulp-inject-string": "1.1.0",
    "gulp-less": "file:lib-custom/gulp-less",
    "gulp-livereload": "2.1.1",
    "gulp-match": "1.0.2",
    "gulp-minify-html": "0.1.8",
    "gulp-ng-annotate": "0.5.3",
    "gulp-ng-html2js": "0.2.2",
    "gulp-plumber": "0.6.6",
    "gulp-rename": "1.2.2",
    "gulp-replace": "0.5.4",
    "gulp-shell": "0.5.2",
    "gulp-sort": "1.1.1",
    "gulp-sourcemaps": "0.4.6",
    "gulp-task-listing": "0.3.0",
    "gulp-template": "0.1.2",
    "gulp-tslint": "5.0.0",
    "gulp-typescript": "2.13.6",
    "gulp-uglify": "1.5.4",
    "gulp-util": "3.0.7",
    "gulp-watch": "4.3.8",
    "guppy-pre-commit": "0.3.0",
    "inquirer": "0.12.0",
    "jasmine-core": "2.4.1",
    "jasmine-promises": "0.4.1",
    "jasmine-reporters": "2.2.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "1.0.1",
    "karma-coffee-preprocessor": "1.0.1",
    "karma-coverage": "1.1.0",
    "karma-firefox-launcher": "1.0.0",
    "karma-html2js-preprocessor": "1.0.0",
    "karma-jasmine": "1.0.2",
    "karma-junit-reporter": "1.1.0",
    "karma-ng-scenario": "1.0.0",
    "karma-notification-reporter": "0.1.1",
    "karma-phantomjs-launcher": "1.0.1",
    "karma-requirejs": "1.0.0",
    "karma-script-launcher": "1.0.0",
    "karma-spec-reporter": "0.0.26",
    "main-bower-files": "2.13.1",
    "merge-stream": "1.0.0",
    "mkdirp": "0.5.1",
    "node-static": "0.7.7",
    "nopt": "2.2.1",
    "requirejs": "2.2.0",
    "run-sequence": "0.3.7",
    "through2": "2.0.1",
    "tslint": "3.11.0",
    "underscore.string": "2.4.0"
  }

Error "Ignoring local @import" after update to 2.4.0

My file structure:

builder
├─ node_modules
└─ gulpfile.js
styles
├─ style1.css
├─ style2.css
└─ style3.css
main.css

main.css:

@import './styles/style1.css';
@import './styles/style2.css';
@import './styles/style3.css';

builder/gulpfile.js:

var gulp = require('gulp');
var cleanCss = require('gulp-clean-css');

gulp.task('styles:min', function() {
  gulp.src('../main.css')
    .pipe(cleanCss())
    .pipe(gulp.dest('../'));
});

So, after update from 2.3.1 to 2.4.0 I have error:

events.js:166
      throw err;
      ^

Error: Uncaught, unspecified "error" event. (Ignoring local @import of "styles/style1.css" as resource is missing. Ignoring local @import of "styles/style2.css" as resource is missing. Ignoring local @import of "styles/style3.css" as resource is missing.)
    at DestroyableTransform.emit (events.js:164:17)
    at DestroyableTransform.onerror (/builder/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:558:12)
    at emitOne (events.js:96:13)
    at DestroyableTransform.emit (events.js:189:7)
    at onwriteError (/builder/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:356:10)
    at onwrite (/builder/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:373:11)
    at WritableState.onwrite (/builder/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:126:5)
    at afterTransform (/builder/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:81:3)
    at TransformState.afterTransform (/builder/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:58:12)
    at /builder/node_modules/gulp-clean-css/index.js:36:16
    at /builder/node_modules/clean-css/lib/clean.js:107:9
    at Object.callback (/builder/node_modules/clean-css/lib/reader/read-sources.js:29:9)
    at doApplySourceMaps (/builder/node_modules/clean-css/lib/reader/apply-source-maps.js:61:23)
    at applySourceMaps (/builder/node_modules/clean-css/lib/reader/apply-source-maps.js:33:5)
    at Object.callback (/builder/node_modules/clean-css/lib/reader/read-sources.js:26:12)
    at doInlineImports (/builder/node_modules/clean-css/lib/reader/read-sources.js:191:25)
    at inlineLocalStylesheet (/builder/node_modules/clean-css/lib/reader/read-sources.js:318:10)
    at inlineStylesheet (/builder/node_modules/clean-css/lib/reader/read-sources.js:202:5)
    at doInlineImports (/builder/node_modules/clean-css/lib/reader/read-sources.js:181:14)
    at inlineLocalStylesheet (/builder/node_modules/clean-css/lib/reader/read-sources.js:318:10)
    at inlineStylesheet (/builder/node_modules/clean-css/lib/reader/read-sources.js:202:5)
    at doInlineImports (/builder/node_modules/clean-css/lib/reader/read-sources.js:181:14)
    at inlineLocalStylesheet (/builder/node_modules/clean-css/lib/reader/read-sources.js:318:10)
    at inlineStylesheet (/builder/node_modules/clean-css/lib/reader/read-sources.js:202:5)
    at doInlineImports (/builder/node_modules/clean-css/lib/reader/read-sources.js:181:14)
    at inline (/builder/node_modules/clean-css/lib/reader/read-sources.js:169:10)
    at fromStyles (/builder/node_modules/clean-css/lib/reader/read-sources.js:143:5)
    at fromString (/builder/node_modules/clean-css/lib/reader/read-sources.js:51:10)
    at doReadSources (/builder/node_modules/clean-css/lib/reader/read-sources.js:36:12)
    at readSources (/builder/node_modules/clean-css/lib/reader/read-sources.js:25:10)
    at /builder/node_modules/clean-css/lib/clean.js:97:12
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

gulp-util is deprecated

gutil.File => https://www.npmjs.com/package/vinyl
gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package/replace-ext
gutil.colors => https://www.npmjs.com/package/ansi-colors
gutil.date => https://www.npmjs.com/package/date-format
gutil.log => https://www.npmjs.com/package/fancy-log
gutil.template => https://www.npmjs.com/package/lodash.template
gutil.env => https://www.npmjs.com/package/minimist
gutil.beep => https://www.npmjs.com/package/beeper
gutil.noop => https://www.npmjs.com/package/through2
gutil.isStream => Use the .isStream() method on Vinyl objects
gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
gutil.isNull => Use the .isNull() method on Vinyl objects
gutil.linefeed => Use the string '\n' in your code
gutil.combine => https://www.npmjs.com/package/multipipe
gutil.buffer => https://www.npmjs.com/package/list-stream
gutil.PluginError => https://www.npmjs.com/package/plugin-error

Error when using inline:['all'] for imports

I got token[0] error, when using inline:['all'] option, I'm trying to inline process @import url(https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css);

Is this problem with clean-css or gulp-clean-css? I have [email protected], [email protected] versions and node.js 6.11.2

I was used to that clean css processed imports automatically, but since the clean-css version 4.0 it was changed and I can't get it working

        .pipe(minifycss({
            compatibility: 'ie9',
            inline: ['all']
        }))

Error:

C:\Projects\newlogic-ui\node_modules\clean-css\lib\optimizer\level-1\optimize.js:628
    switch (token[0]) {
                 ^

TypeError: Cannot read property '0' of undefined
    at level1Optimize (C:\Projects\newlogic-ui\node_modules\clean-css\lib\optimizer\level-1\optimize.js:628:18)
    at optimize (C:\Projects\newlogic-ui\node_modules\clean-css\lib\clean.js:128:5)
    at C:\Projects\newlogic-ui\node_modules\clean-css\lib\clean.js:104:29
    at C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\read-sources.js:26:64
    at loadOriginalSources (C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\load-original-sources.js:26:5)
    at C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\read-sources.js:26:14
    at applySourceMaps (C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\apply-source-maps.js:34:5)
    at Object.callback (C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\read-sources.js:25:12)
    at doInlineImports (C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\read-sources.js:200:25)
    at inlineLocalStylesheet (C:\Projects\newlogic-ui\node_modules\clean-css\lib\reader\read-sources.js:327:10)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.