scniro / gulp-clean-css Goto Github PK
View Code? Open in Web Editor NEWMinify css with clean-css.
License: MIT License
Minify css with clean-css.
License: MIT License
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?
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());
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));
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.
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/'));
});
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
Would you please help me with this?
source:
background:url(../../images/test.png);
dest:
background:url(../images/test.png);
Thanks.
before:
background: url(../../../img/index_sprite.png) no-repeat -10px -40px;
after:
background: url(../img/index_sprite.png) no-repeat -10px -40px;
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?
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
Hello!
The problem arose from the fact that I override options, and the output is a file with the default settings.
http://joxi.ru/Dr8nq07H8EeG26 - css file
http://joxi.ru/E2pkaRxIN1l4mY - gulpfile
http://joxi.ru/xAee4zWTEB9BAy - output file
I expect the file to shrink, only formatted. And he shrinks and classes are grouped. I can not understand what the problem is.
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
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'));
});
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?
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
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
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)
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:
$
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)
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!
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));
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
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?
Please upgrade to the latest version of clean-css (at this time it is up to version 4.0.0)
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%
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.
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
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. :-)
/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)
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?
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.
when I have @import in css, this module broken :(
you want add support to this?
is css3 import (I believe), the doc of this feature, I found here https://developer.mozilla.org/pt-BR/docs/Web/CSS/@import
@import url(https://fonts.googleapis.com/css?family=Fira+Mono);
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']);
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"
}
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!
"1.2.4 is the latest of 40 releases" which is not true
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!
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']);
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
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.%
I'm trying to use the Google font "Crimson Text", however with the default optimization level the "Crimson" text is being replaced with its hex color equivalent "#dc143c" via the shorten-hex.js. Any thoughts on how to fix?
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 :)
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.
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.
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?
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.
Please update clean-css to 4.1.11 or higher due to a minor vulnerability detailed here:
https://snyk.io/vuln/npm:clean-css:20180306
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.
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/'))
})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.