scniro/gulp-clean-css

ReferenceError: cleanCSS is not defined

hdcdstr8fwd opened this issue · 2 comments

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']);

Per your tasks, change the following...

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

=>

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

As seen with your usage below...

return gulp.src([
  'bower_components/foundation-sites/dist/foundation.css', 
  'bower_components/font-awesome/css/font-awesome.js',
  'src/css/*.css'
])
.pipe(cleanCSS()) // <===
//[...]

looks like nothing more than a syntax error per your variable naming

Amazing thanks!