I'm using Imagemin with Grunt, and have the following task setup in Gruntfile.js
imagemin: {
options: {
optimizationLevel: 5,
progressive: true,
},
dev: {
files: [{
expand: true,
cwd: 'src/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'app/minimg/'
}]
}
},
It looks like it is working because if I run "grunt imagemin", the output files is saved in the dest folder - and I get this message:
Running "imagemin:dev" (imagemin) task
Minified 13 images (saved 0 B)
But, why is the images not compressed ("saved 0 B") ? I have tried with a lot of different files both png and jpg. And it is always 0 B.
// Magnus
Please try the latest version 'grunt-contrib-imagemin' .
It Worked for me :)
//uninstalled the package. add -g flag if you've installed it globally.
npm uninstall grunt-contrib-imagemin --save-dev
//install again
npm install grunt-contrib-imagemin --save-dev
Related
I have a working Gatsby install that I've been adding to, however, in trying to build in some graphQL build-time data fetching, I've run into an issue that causes error when running npm start (gatsby develop) or gatsby build.
I installed gatsby-source-graphql as described here:
https://www.npmjs.com/package/gatsby-source-graphql
And I included it in my gatsby-config.js like this:
module.exports = {
// Optional
siteMetadata: {
title: `Title from siteMetadata`,
},
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
name: "Project Template",
short_name: "PT",
start_url: "/",
background_color: "#6b37bf",
theme_color: "#6b37bf",
// Enables "Add to Homescreen" prompt and disables browser UI (including back button)
// see https://developers.google.com/web/fundamentals/web-app-manifest/#display
display: "standalone",
icon: "src/images/icon.png", // This path is relative to the root of the site.
// An optional attribute which provides support for CORS check.
// If you do not provide a crossOrigin option, it will skip CORS for manifest.
// Any invalid keyword or empty string defaults to `anonymous`
crossOrigin: `use-credentials`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
// GraphQL APIs for use during build-time.
// https://www.npmjs.com/package/gatsby-source-graphql
//////////////////////////////////////////////////////
{
resolve: "gatsby-source-graphql",
options: {
// Arbitrary name for the remote schema Query type
typeName: "SpaceX",
// Field under which the remote schema will be accessible. You'll use this in your Gatsby query
fieldName: "spaceX",
// Url to query from
url: "https://api.spacex.land/graphql/",
},
},
// {
// resolve: "gatsby-source-graphql",
// options: {
// // Arbitrary name for the remote schema Query type
// typeName: "SWAPI",
// // Field under which the remote schema will be accessible. You'll use this in your Gatsby query
// fieldName: "swapi",
// // Url to query from
// url: "https://swapi-graphql.netlify.app/.netlify/functions/index",
// },
// },
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
`gatsby-theme-material-ui`,
{
resolve: `gatsby-plugin-nprogress`,
options: {
// Setting a color is optional.
color: `tomato`,
// Disable the loading spinner.
showSpinner: false,
},
},
`gatsby-plugin-transition-link`,
`gatsby-plugin-layout`, // Trial and error showed this needs to be last (But that doesn't mean it will always work in the dev environment, try npm run clean or if that fails - test in build)
],
}
But it produces this error:
Error in "/Users//Documents/projects/project/node_modules/gatsby-source-graphql/gatsby-node.js":
Cannot find module 'gatsby/graphql'
Error: Cannot find module 'gatsby/graphql'
- loader.js:636 Function.Module._resolveFilename
internal/modules/cjs/loader.js:636:15
- loader.js:562 Function.Module._load
internal/modules/cjs/loader.js:562:25
- loader.js:692 Module.require
internal/modules/cjs/loader.js:692:17
- v8-compile-cache.js:159 require
[client]/[v8-compile-cache]/v8-compile-cache.js:159:20
- gatsby-node.js:8 Object.<anonymous>
[tbwa-project-template]/[gatsby-source-graphql]/gatsby-node.js:8:5
- v8-compile-cache.js:178 Module._compile
[client]/[v8-compile-cache]/v8-compile-cache.js:178:30
- loader.js:789 Object.Module._extensions..js
internal/modules/cjs/loader.js:789:10
- loader.js:653 Module.load
internal/modules/cjs/loader.js:653:32
- loader.js:593 tryModuleLoad
internal/modules/cjs/loader.js:593:12
- loader.js:585 Function.Module._load
internal/modules/cjs/loader.js:585:3
- loader.js:692 Module.require
internal/modules/cjs/loader.js:692:17
- v8-compile-cache.js:159 require
[client]/[v8-compile-cache]/v8-compile-cache.js:159:20
- resolve-module-exports.ts:197 resolveModuleExports
[client]/[gatsby]/src/bootstrap/resolve-module-exports.ts:197:26
- validate.ts:348 forEach
[client]/[gatsby]/src/bootstrap/load-plugins/validate.ts:348:31
- Array.forEach
- validate.ts:340 collatePluginAPIs
[client]/[gatsby]/src/bootstrap/load-plugins/validate.ts:340:20
not finished load plugins - 0.727s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project-template#1.0.0 start: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project-template#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/_logs/2021-02-04T00_31_34_070Z-debug.log
What I've tried:
I've tried two different gatsby-source-graphql definitions in the config (only ever one at a time), but both produce the error. THe second one (commented out above) is taken directly from The github page example and the Gatsby example.
I've tried changing the order of the plugins (i've tried every position) but still get the error.
If I comment any and all gatsby-source-graphql sections in the config, it doesn't produce the error.
If I comment out all plugins except one of the gatsby-source-graphql sections, I still get the exact same error.
I've also tried removing the node_modules folder, running npm run clean, and then npm install again with no change.
I've tried DanceParty's solution described in the link below as well with no change:
https://github.com/gatsbyjs/gatsby/issues/8249
I've tried running npm update and npm install npm#latest -g and saw no change.
My environment report using gatsby info --clipboard is:
System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-6287U CPU # 3.10GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.23.1 - /usr/local/bin/node
npm: 6.14.10 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 88.0.4324.96
Firefox: 85.0
Safari: 14.0.2
npmPackages:
gatsby: ^2.26.1 => 2.32.0
gatsby-image: ^2.10.0 => 2.11.0
gatsby-plugin-layout: ^1.9.0 => 1.10.0
gatsby-plugin-manifest: ^2.11.0 => 2.12.0
gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
gatsby-plugin-nprogress: ^2.9.0 => 2.10.0
gatsby-plugin-react-helmet: ^3.8.0 => 3.10.0
gatsby-plugin-sharp: ^2.13.0 => 2.14.0
gatsby-plugin-transition-link: ^1.20.5 => 1.20.5
gatsby-source-filesystem: ^2.10.0 => 2.11.0
gatsby-theme-material-ui: ^1.0.13 => 1.0.13
gatsby-transformer-sharp: ^2.11.0 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.19.0
Any ideas?
I started creating a minimal reproduction and adding everything back one by one, but decided to play more with my first setup for a little...and I'm glad I did.
Here's what caused the issue:
This Gatsby install is part of a Project Template we use which includes backend code, front-end, pipeline deployment scripts, etc.
The structure is similar to:
ProjectTemplate folder
client folder
server folder
other folders
The Gatsby install lives in the client folder but occasionally I need to go into the root folder to do certain things.
So what happened!?
I accidentally installed gatsby-source-graphql into the root folder instead of the client folder. That's all.
I should have picked this up when I ran gatsby info --clipboard as it's clearly not listed as a dependency.
I am working with a web team and we keep all our files on a local shared server in the office. ( we are slowly moving everything over to git so please no comments about how dumb we are for not using git. Thanks! )
We are using gulp to compile our sass to css and when one of us compiles we are fine but once someone else tries to run a node process and compile with gulp we get the following error....
[10:12:53] Starting 'sass'...
[10:12:53] Starting 'watch'...
[10:12:54] Finished 'watch' after 173 ms
[10:12:54] 'sass' errored after 442 ms
EPERM: operation not permitted, chmod '/the file path/'
I have tried using chmod to change the file permissions but I don't think that is the issue. I use atom as my editor and some of the other developers on the team use sublime.
I have read that some editors can lock files. Not sure if this is the cause but if it is I don't know how to fix this. Is the only solution to this problem to use git and have local copies on our own personal computers?
Thanks in advance!
gulpfile.js
// Include gulp
var gulp = require('gulp');
// Include Our Plugins
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
var sassOptions = {
errLogToConsole: true,
outputStyle: 'nested' // Styles: nested, compact, expanded, compressed
};
// Compile Sass file to CSS, and reload browser(s).
gulp.task('sass', function() {
return gulp.src('includes/scss/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass.sync(sassOptions))
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('includes/css'));
});
gulp.task('minify-css', function() {
return gulp.src('includes/css/*.css')
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('includes/css'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('includes/scss/**/*.scss', ['sass']);
});
// Default Task
//gulp.task('serve', ['sass', 'minify-css', 'watch']);
gulp.task('serve', ['sass', 'watch']);
This happens because you need to run your gulpfile as admin.
So run sudo -i, insert your admin password, and then just run again.
I was on the same problem, it worked for me.
Sometimes this is caused by Watch. But more often this is because Gulp preserve the flags in the gulp.dest command. If you have a source file with read-only flags. You have to overwrite the flags each time your source file is included in gulp.dest command.
This way:
.pipe(gulp.dest('includes/css', mode: 0o777));
That problem has also happened to me. What I did was start from a terminal as root, and just write gulp to me I worked.
Just uninstall your gulp :
npm uninstall gulp -g
then
npm install gulp -g
Set path in environment valiable in windows.
Restart your system or cmd prompt.
I was getting the error on compile-sass. I had to delete the destination .css file, then all was well.
After setting up the folder structure for my Gulp project, I was wondering how to do paths in browserify, and found this page: https://github.com/substack/browserify-handbook#organizing-modules. It recommends putting common application parts in a subfolder of node_modules. This appears to be working, it's getting the files, but it's not applying my coffeeify transform, so it's throwing errors because it's trying to interpret them as JS. Any ideas how to fix this? This is my browserify config:
browserify: {
// Enable source maps
debug: true,
// Additional file extentions to make optional
extensions: ['.coffee', '.hbs'],
// A separate bundle will be generated for each
// bundle config in the list below
bundleConfigs: [{
entries: src + '/javascript/app.coffee',
dest: dest,
outputName: 'app.js'
}, {
entries: src + '/javascript/head.coffee',
dest: dest,
outputName: 'head.js'
}]
}
and these are the relevant bits form my package.json.
"browserify": {
"transform": [
"coffeeify",
"hbsfy"
]
}
Transfroms aren't applied to files in node_modules unless they are marked as being global: https://github.com/substack/node-browserify#btransformtr-opts. If you choose to make it global, be warned, the documentation suggests against it:
Use global transforms cautiously and sparingly, since most of the time
an ordinary transform will suffice.
You won't be able to specify the tranform in package.json:
You can also not configure global transforms in a package.json like
you can with ordinary transforms.
The two options are programmatically, by passing {global: true} as options or at the command line with the -g option:
browserify -g coffeeify main.coffee > bundle.js
Is there a way to ask JSDoc (either in the command line or through grunt-jsdoc plugin) to lookup tutorials from different directories ?
As per the documentation, -u allows to specify the Directory in which JSDoc should search for tutorials. (it says the Directory instead of Directories).
I tried the following with no luck:
specify different strings separated by space or comma
specify one string with shell/ant regular expression
As suggested by #Vasil Vanchuk, a solution would be creating links to all tutorial files within a single directory. As such, JSDoc3 will be happy and it will proceed with the generation of all tutorials.
Creating/maintaining links manually would be a tedious task. Hence, and for people using grunt, the grunt-contrib-symlink come in handy. Using this plugin, the solution is reduced to a config task.
My Gruntfile.js looks like the following:
clean:['tmp', 'doc'],
symlink: {
options: {
overwrite: false,
},
tutorials: {
files: [{
cwd: '../module1/src/main/js/tut',
dest: 'tmp/tutorial-generation-workspace',
expand: true,
src: ['*'],
}, {
cwd: '../module2/src/main/js/tut',
dest: 'tmp/tutorial-generation-workspace',
expand: true,
src: ['*'],
}]
}
},
jsdoc: {
all: {
src: [
'../module1/src/main/js/**/*.js',
'../module2/src/main/js/**/*.js',
'./README.md',
],
options: {
destination: 'doc',
tutorials: 'tmp/tutorial-generation-workspace',
configure : "jsdocconf.json",
template: 'node_modules/grunt-jsdoc/node_modules/ink-docstrap/template',
},
}
},
grunt.loadNpmTasks('grunt-contrib-symlink');
grunt.loadNpmTasks('grunt-jsdoc');
grunt.registerTask('build', ['clean', 'symlink', 'jsdoc']);
grunt.registerTask('default', ['build']);
Integrating new module is translated by updating symlink and jsdoc tasks.
You could just copy the files instead of linking to a bunch of directories.
E.g. create a dir in your project for documentation in which you'll copy over all relevant tutorials from where ever.
Then, in your npm scripts you can have something like this:
"copy:curry": "cp node_modules/#justinc/jsdocs/tutorials/curry.md doc/tutorials",
"predocs": "npm run copy:curry",
The docs script (not shown) runs jsdoc. predocs runs automatically before docs and, in this case copies over a tutorial in one of my packages over to doc/tutorials. You can then pass doc/tutorials as the single directory housing all your tutorials.
In predocs you can keep adding things to copy with bash's && - or if that's not available for whatever reason, you'll find npm packages which let you do this (therefore not relying on whatever shell you're using).
Now that I think about it, it's best to also delete doc/tutorials in predocs:
"predocs": "rm -rf doc/tutorials && mkdir -p doc/tutorials && npm run copy:tutorials",
That way any tutorials you once copied there (but are now not interested in) will be cleared each time you generate the docs.
btw, I opened an issue for this: https://github.com/jsdoc3/jsdoc/issues/1330
I'm having an error with GruntJS when I try to run a grunt watch.
It works fine, until there is a change in the file it is
watching, then, it looks something like this:
Running "watch" task
Waiting...[1] 2464 bus error grunt watch
The number 2464 changes. It seems to be the port that grunt is watching on? But, I'm not sure. Here is my Gruntfile:
module.exports = function (grunt) {
"use strict";
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compact'
},
files: {
'css/style.css': 'sass/style.scss',
}
}
},
watch: {
files: 'sass/style.scss',
tasks: ['sass']
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
Thanks in advance for all the help!
Do you use Osx maverick?
checkout this: https://github.com/gruntjs/grunt-contrib-watch/issues/204
You need to upgrade node.js to 0.10.22 version:
# Check your version of Node.js. v0.10.20 will still be broken
node –v
# clean your node cache
sudo npm cache clean –f
# install node binary manager ’n’
sudo npm install -g n
# use said ’n’ manager to install latest stable version
sudo n stable
source: http://stephentvedt.com/blog/2013/11/16/grunt-js-watch-bus-error/
Invalid syntax in sass files can also cause grunt or gulp to exit with a bus error. If you've already updated node and reinstalled modules without any success, try running sass --watch <sass glob> and see if there are any errors (import loops can be safely ignored as the cause).