The error is coming from the postcss plugin, I think I may have written it incorrectly.
I'm trying to add cssnano and autoprefixer to the postcss plugin.
gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
throw new Error(i + ' is not a PostCSS plugin');
^
Error: [object Object] is not a PostCSS plugin
at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:300:12)
at writeOrBuffer (_stream_writable.js:286:5)
at Transform.Writable.write (_stream_writable.js:214:11)
at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$
My code:
// Dependancies
var gulp = require('gulp'),
browserSync = require('browser-sync'),
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
compass = require('gulp-compass'),
rename = require('gulp-rename'),
nano = require('cssnano'),
del = require('del'),
postcss = require('gulp-postcss'),
sass = require('gulp-sass');
// Styles
gulp.task('styles', function(){
gulp.src('sass/main.scss')
.pipe(sass())
.pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), nano()]))
.pipe(gulp.dest('css/'));
gulp.watch('sass/**/*.scss', ['styles']);
});
// Tasks
gulp.task('default', ['styles']);
#rizkit - I found the fix and it's simple. Just run npm i -d postcss and the problem is solved.
Basically, you need both gulp-postcss and postcss plugins in your dependencies for this to work correctly. I'm assuming the gulp-postcss plugin will need to update the postcss package reference in the project to fix it properly, so we only need to include gulp-postcss in the future.
You are using the gulp-autoprefixer package. That's simply a wrapper around the original autoprefixer package that turns it into a gulp plugin, so you can do .pipe(autoprefixer()).
However postcss expects the original package itself, not the gulp plugin.
So instead of this:
autoprefixer = require('gulp-autoprefixer'),
You need to install the autoprefixer package and do this:
autoprefixer = require('autoprefixer'),
Tailwindcss & React issue
For anyone facing the above issue while setting up a react project with tailwindcss, running npm i postcss -D worked for me.
If you use autoprefixer 10 you might stumble upon that problem again, there is a github issue related to that with some links and explanations: https://github.com/postcss/autoprefixer/issues/1358
tl;dr:
for postcss-cli and gulp-postcss you have to wait for an update, for PostStylus you might never get an update.
or add postcss as a devDependency
In my case I was still getting this error along with cannot find build-manifest.json
when I upgraded to Next js v 10 and upgraded tailwind, autoprefixer and postcss.
I had to upgrade yarn as well to finally get rid of the errors.
The updated dev dependencies in my package.json were as:
"devDependencies": {
"autoprefixer": "^10.2.6",
"babel-plugin-inline-react-svg": "^1.1.1",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
Add below minimum devDependencies in your package.json
"#babel/core": "^7.8.7",
"#babel/preset-env": "^7.8.7",
"babel-preset-env": "^1.7.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"gulp": "4",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-eslint": "^6.0.0",
"gulp-imagemin": "^7.1.0",
"gulp-mode": "^1.0.2",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylelint": "^13.0.0",
"gulp-uglify": "^3.0.2",
"prettier": "^2.0.5",
"stylelint": "^13.3.3",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.17.2"
Related
I'm using gulp babel and when I change the path to include a glob, I'm no longer getting an output, but when I have a specific path in , I get an output.
I'm using gulp babel version 8, I have this issue where my gulp task only runs successfully when I provide a full path, the task works fine and it outputs a file to the destination I provided, but this folder contains many files I'd like to use babel on.
When I change to use a glob the task just starts but never stops and no file is output, I've tried googling it but it doesn't seem like there's many useful materials on an issue like this
Working gulp task:
gulp.task('transpile-calendar', () =>
gulp.src('javascript/util/dateUtil.js')
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(gulp.dest('static/js/prod'))
);
Gulp task that does not produce output:
gulp.task('transpile-calendar', () =>
gulp.src('javascript/util/*.js')
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(gulp.dest('static/js/prod'))
);
Contents of my package.json:
"#babel/core": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"babel-polyfill": "6.26.0",
"browser-sync": "2.26.3",
"gulp": "3.9.1",
"gulp-add-src": "1.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "3.10.0",
"gulp-compass": "2.1.0",
"gulp-concat": "2.6.1",
"gulp-if": "2.0.2",
"gulp-ng-annotate": "2.1.0",
"gulp-strip-css-comments": "2.0.0",
"gulp-uglify": "3.0.2",
"vue": "2.6.10"
I expect my use of the * to include both the files in the gulp task and produce output in the same file similar to the first one without the use of *.
I have now resolved my issue. In case anyone comes across this in the future and has the same problem, I had a syntax error in my code.
It is very useful to log out any potential errors in the gulptask by using
.on("error", err => console.log(err)) included in your task.
I am compiling with Babel for the development of Google App Script.
Because Google App Script does not correspond ES6 grammar.
I like the ES6 set type, so I tried using ES6's new Set () , but it does not transpile and it is left as it is.
How can I transfer to ES5?
The package.json is as follows.
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-es5-property-mutators": "^6.24.1",
"babel-preset-env": "^1.7.0",
"child_process": "^1.0.2",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-googleappsscript": "^1.0.1",
"eslint-plugin-import": "^2.12.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1"
}
Set is polyfillable. Features that can be polyfilled aren't transpiled.
core-js, babel-polyfill (it uses core-js internally) or any other ES6 polyfill can be used for this purpose.
I'd like to copy only modules, which are important for application - those located inside dependencies in package.json. I'd like to omit those under devDependencies.
package.json
{
"dependencies": {
"express": "^4.13.4",
"log4js": "^0.6.33"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-rename": "^1.2.2",
"gulp-typescript": "^2.12.1",
"typings": "^0.7.9",
"yargs": "^4.3.2"
}
}
gulpfile.js
gulp.task('copy_packages', function() {
gulp
.src('node_modules/**/*.*')
.pipe(gulp.dest('../release/node_modules'));
});
Is there any module or a smart way to distinguish which modules belongs to dependencies group and which to devDependencies?
Had the same problem...felt weird this was not considered when gulp was created.
My work around was using child_process to run npm install and specify a directory to put the node_modules directory with only the packages you need for your application.
e.g:
gulp.task('createDeployNodeModulesFolder', function(cb) {
spawn('"npm"', ['install', '--prefix', './dist/', 'package1', 'package2'], {stdio: 'inherit', shell: true}, function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
})
.on('close', cb);
});
In your case you want only the production dependencies so you can likely use:
npm install --prefix /deployDir/ --only=prod
There will be some warnings complaining about no package.json..etc., but those are just warnings. If you really want to get rid of them, I guess you can just add a task to copy or create a package.json into the deploy directory before running npm install.
Node.js allows you to require() JSON files which will be returned as simple JavaScript objects. You can use that to only pass those modules to gulp.src() that appear under dependencies in your package.json file:
var gulp = require('gulp');
var packageJson = require('./package.json');
gulp.task('copy_packages', function() {
var modules = Object.keys(packageJson.dependencies);
var moduleFiles = modules.map(function(module) {
return 'node_modules/' + module + '/**/*.*';
});
return gulp.src(moduleFiles, { base: 'node_modules' })
.pipe(gulp.dest('../release/node_modules'));
});
use distize https://www.npmjs.com/distize .
npx distize --no-files -o {targetpath}
I'm using "gulp-bower" to auto install all the libs from bower.json, I also want gulp to minify all libs once it's been download. This is my code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var bower = require('gulp-bower');
var mainBowerFiles = require('main-bower-files');
gulp.task('bower', function() {
return bower()
.pipe(gulp.dest("./bower_components"))
});
gulp.task('minifyBower', function() {
return gulp.src(mainBowerFiles())
.pipe(concat('lib.js'))
.pipe(gulp.dest('dist'))
});
gulp.task('default', ['bower','minifyBower']);
If I run this I got this error.
Starting 'bower'...
[11:23:06] Using cwd: /Users/yizhou/Documents/Yi
[11:23:06] Using bower dir: ./bower_components
[11:23:06] Starting 'minifyBower'...
[11:23:06] 'minifyBower' errored after 1.53 ms
[11:23:06] Error: Bower components directory does not exist at /Users/yizhou/Documents/Yi/bower_components
at Error (native)
at module.exports (/Users/yizhou/Documents/Yi/node_modules/main-bower-files/lib/index.js:76:71)
at Gulp.<anonymous> (/Users/yizhou/Documents/Yi/gulpfile.js:16:21)
at module.exports (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/yizhou/Documents/Yi/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
[11:23:06] bower cached git://github.com/jquery/jquery.git#2.1.4
[11:23:06] bower validate 2.1.4 against git://github.com/jquery/jquery.git#~2.1.4
[11:23:07] bower install jquery#2.1.4
[11:23:08] Finished 'bower' after 2 s
gulp runs every task asynchronously by default, to improve performance. If you want to run in sequence, you need to explicit declare dependencies:
gulp.task('minifyBower', ['bower'], function() { /* ... */ });
Now minifyBower won't run until bower is run. If you need more complex stuff, you should use something like run-sequence.
I've just started using gulp for the first time, required all the plugins I want to use and written the first task for sass compilation. It seems to work but there are two problems, firstly when I type gulp on the command line it seems to take 3 or 4 seconds to start which seems slower than grunt (I started using gulp because I understood it was faster). Is this normal?
The main problem though is that I have a default task which calls the sass task. The command line output seems to suggest that both are being run which means the sass is being compiled twice. It is also outputting my single gulp-notify notification twice which doesn't seem right.
Here is the command line output...
λ gulp default
[00:53:40] Using gulpfile ~\Desktop\jon\gulpfile.js
[00:53:40] Starting 'sass'...
[00:53:40] Finished 'sass' after 10 ms
[00:53:40] Starting 'default'...
[00:53:40] Finished 'default' after 7.93 μs
[00:53:41] gulp-notify: [Gulp notification] Css created
[00:53:41] gulp-notify: [Gulp notification] Css created
And here is my gulp file in full...
var gulp = require('gulp'),
gutil = require('gulp-util'),
compass = require('gulp-compass'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
traceur = require('gulp-traceur'),
svgmin = require('gulp-svgmin'),
imagemin = require('gulp-imagemin'),
ngAnnotate = require('gulp-ng-annotate'),
expect = require('gulp-expect-file'),
sourcemaps = require('gulp-sourcemaps');
var paths = {
src: "src",
css: "stylesheets",
img: "images",
js: "js"
}
// Compile Our Sass
gulp.task('sass', function() {
gulp.src(paths.src + '/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(compass({
sass: 'src/sass',
environment: 'development',
outputStyle: 'expanded',
debugInfo: false,
noLineComments: true
}))
.pipe(autoprefixer('> 5%', 'last 2 version', 'ie 9'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.css))
.pipe(notify({ message: 'Css created' }));
});
// Dev Task
gulp.task('default', ['sass']);
Anybody know what's going on here? Have I misunderstood how Gulp tasks work?
Use the onLast option of gulp-notify if you only want a single notification per-stream:
//...
.pipe(notify({message: 'Css created', onLast: true}));