I'm trying to do a grunt task to optimize my png project files. I'm using grunt-img plugin and this is my grunt.initConfig:
grunt.initConfig({
img: {
task1: {
src: ['myapp/Skins/**/*.png'],
dest: 'myapp/img-temp'
}
}
});
That should do, process all png files in Skins folders, compress and put them into img-temp folder, right? Right.
First, i had an error because jpegtran isn't installed on my computer (woh, i put *.png why did it needs jpegtran?) but ok, i installed it and try again. And now i have this error:
Running "img:task1" (img) task
Running optipng... app/Skins/skin1/img/navigationBar/background.png, app/Skins/skin1/img/navigationBar/nb_buttons.png, ...
>> 1
** Error: Unrecognized option: -clobber
Anybody knows what does it mean?
I can't find what it means, but i find that grunt-img is deprecated, now we have grunt-contrib-imagemin
It works!
Related
I would like to report stack traces from uncaught exceptions in my JavaScript app, but the problem is that the included JavaScript is a Browserify bundle. This means that when I obtain the stack of an exception, it refers to positions within the bundle file, even if the JavaScript bundle contains source maps!
How can I translate the file positions within the stack to the original source files? I guess it involves some use of source maps?
Below is an example program that prints the stack trace of an exception:
index.html
<script src="/bundle.js"></script>
index.js
window.onerror = (message, url, line, column, error) => {
console.log(`An exception was caught for URL ${url}, line ${line}:`, error.stack)
}
const thrower = () => {
throw new Error(`Catch me if you can`)
}
const callingThrower = () => {
thrower()
}
callingThrower()
Generate the Bundle
# The --debug flag enables inline source maps
browserify --debug -o bundle.js index.js
Program Output
An exception was caught for URL http://localhost:8000/bundle.js, line 7: Error: Catch me if you can
at thrower (http://localhost:8000/bundle.js:7:9)
at callingThrower (http://localhost:8000/bundle.js:11:3)
at Object.1 (http://localhost:8000/bundle.js:14:1)
at s (http://localhost:8000/bundle.js:1:254)
at e (http://localhost:8000/bundle.js:1:425)
at http://localhost:8000/bundle.js:1:443
Browsers
I've tested with Chrome and Firefox on OS X.
One thing you can do in your code is to enable the sourcemaps
The source maps are the files that tell your browser to translate the line references in your transformed code and the line references in your original code.
Here is a good link to get an idea of the sourceMaps
Enabling the source maps is very easy in the Browserify.You just have to run
browserify --debug main.js -o bundle.js
--debug tells you to include the sourceMaps in the bundle.js but to a disadvantage it makes your bundle twice as large
However you can tell the users to download this file separately by using the plugin exorcist and it will split the source maps into bundle.js.map
For me I add the browserify options in the gulpfile.js as gruntfile.js as
browserify: {
dist: {
src: ['src/main.js'],
dest: 'dist/bundle.js',
options: {
debug: true
}
}
},
to enable it or as mentioned in this thread you can use browserifyOptions instead as
options: { browserifyOptions : {} }
I'm using gulp-coffee to compile my coffee files to js, nothing fancy.
I'm having a hard time figuring how to remove js files (in the dest js directory) that DO NOT exist anymore in the source coffee folder.
I'm quite sure this does not concern directly gulp-coffee, but I'm kind of clueless and I'm not that proficient in gulp.
My Files structure
/app/
/coffee (source)
/js (dest)
My gulp task
gulp.task('coffee', function() {
return gulp.src('app/coffee/**/*.coffee')
.pipe($.changed('./app/js/', {extension: '.js'}))
.pipe($.coffee())
.on('error', logCoffeeError)
.pipe(gulp.dest('app/js/'));
});
If anybody is interested on the solution of this problem I ended up using this package that does exactly what I was looking for: https://github.com/StevenTheEVILZ/gulp-syncronize
USAGE:
gulp.task('unused', function() {
return syncronize({
src: 'app/coffee/', //Source folder
target: 'app/js/', //Output folder
extensions: {
'js': 'coffee', // Corresponds .js files to the .coffee files;
}
});
});
Haven't found any help with my issue with search and google.
I'm having issues with Gulp and cssmin. Can't figure out what's causing an error. The idea is to keep original css files and minified version in the same folder, concatenation isn't needed.
My gulp task code:
gulp.task("min:css", function ()
{
return gulp.src([paths.css, "!" + paths.minCss], { base: "." })
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('.'));
});
And error I'm getting after running the task:
[13:30:47] Starting 'min:css'...
[13:30:49] 'min:css' errored after 1.59 s
[13:30:49] Error: EPERM: operation not permitted, open '%file location%\bootstrap-theme.min.css' at Error (native)
UPD: After removing the bootstrap-theme.min.css, the error is caused by another one. Conclusion: the task can't overwrite the existing min.css files.
UPD:Managed to make it work with deleting all the .min.css files before build and running the task after the build. Not the best solution imo.
Is there any way to run the command without that, so all min.css files are deleted first?
Any chance your CSS files are in nested folders?
EDIT -
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(cssmin())
.pipe(plugins.rename(function (path) {
path.basename += '.min';
path.dirname += '';
}))
.pipe(gulp.dest('{root folders name}'));
What this will do is rename the file with .min and add the file path to the name.
This will ensure the files go to the exact same place the originals are.
I have installed fontawesome with bower and am using grunt's "grunt-contrib-copy" to copy it to a diff directory.
When I manually copy it, the font works ... but, when grunt does it, they do not work.
Now, I checked the files, and I noticed grunt's copy does the work, it increases the file size !
The file sizes from fontawesome :
85908 FontAwesome.otf
56006 fontawesome-webfont.eot
287007 fontawesome-webfont.svg
112160 fontawesome-webfont.ttf
65452 fontawesome-webfont.woff
The file sizes after grunt copied them :
163355 FontAwesome.otf
101913 fontawesome-webfont.eot
287008 fontawesome-webfont.svg
143313 fontawesome-webfont.ttf
120957 fontawesome-webfont.woff
Here i my gruntfile.js snippet :
'fontawesome-fonts': {
expand: true,
cwd: 'public/vendor/fontawesome/fonts',
src: '*',
dest: path.join(__dirname, 'public', 'fonts')
}
It seems as though grunt-copy is incapable of copying binary files correctly (sometimes?)
So, it is recommended to not use it for binary files - images, music, videos, fonts, etc.
EDIT:
One possible method of fixing this which worked for me was as mentioned at https://github.com/gruntjs/grunt-contrib-copy/issues/64, use processContent: false or processContentExclude: ['**/*.{png,gif,jpg,ico,psd}'] in the options section of copy.
I tried to create a gulpfile.js for my personal website project. I've never done this before but with a little 'trial and error' it now works in an acceptable way.
The only thing that doesn't work even after 1000 modifications is simple copying files and folders.
var files = {
data_src : [
'./files.json',
'data/**/*.*'
],
distribution_dest : '_distribution'
};
gulp.task('copy-data', function() {
gulp.src(files.data_src, { base: './' })
.pipe(gulp.dest(files.distribution_dest))
.pipe(notify({message: 'Data copied for distribution!'}));
});
This should copy all sub-folders and files to the gulp.dest. But it copies only half of them, some folders will be ignored even if I change their names etc. (no special characters, same subfolder structure as the once that got copied correctly ...) - nothing worked. I just can't see any pattern in this.
There is no error message while running gulp. Nothing that would help me find the error.
Why are some folders or files excluded from copying?
I use base to keep the folder / sub-folder structure; tried with and without 'base' -> no effects on the copying process.
I also changed the position of the 'copy-data' task in the run-list. Actually it's the first task to run. There seems to be no change in behavior no matter if it's the first or the last one.
gulp.task('default', function() {
gulp.run('copy-data', 'custom-sass', 'framework-sass', 'custom-js', 'framework-js', 'replace-tags', 'browser-sync');
... some watches ...
});
The structure of the data folder looks like these:
./data
|-doc
|---content
|---template
|-img
|---chart
|---icon
|---logo
|---pattern
|---people
|---photo
|---symbol
|-----brandklassen
|-----brandschutzzeichen
|-----gebotszeichen
|-----gefahrensymbole
|-----rettungszeichen
|-----verbotszeichen
|-----verkehrsrechtzeichen
|-----warnzeichen
|---wallpaper
/data/doc and all subfolders are ok.
/data/img/chart to /data/img/people are also ok.
Within /data/img/photo only 14 out of 21 images are copied.
/data/img/symbol with sub-folders and /data/img/wallpaper were ignored completely.
SOLVED IT MYSELF! The problem was caused by async operating tasks. Adding a return forced gulp to complete the copying process before continuing!
gulp.task('copy-data', function() {
return gulp.src(files.data_src, { base: './' })
.pipe(gulp.dest(files.distribution_dest))
.pipe(notify({message: 'Data copied for distribution!'}))
});
Now all images will be copied!