I'm trying to get the default Yeoman Webapp to work with Assemble.io.
I followed this tutorial Using assemble.io with yeoman.io’s webapp Gruntfile
Got it up & running (partially), the first problem I have is that livereload isn't kicking in when changes are made to the .hbs files. When I manually refresh, I can see the changes that were made.
This is my Grunt file.
Second problem is that 'grunt build' gives me the following error:
Running "requirejs:dist" (requirejs) task
{ [Error: Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".
at Function.build.createConfig ([MY DIRECTORY]/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25109:19)
]
originalError: [Error: Missing either an "out" or "dir" config value. If using "appDir" for a full project optimization, use "dir". If you want to optimize to one file, use "out".] }
I googled around & when I add the following to requirejs:dist:options
appDir: '<%= yeoman.app %>/', dir: 'build'
Then this error is solved, but the next appears:
No "concat" targets found.
Warning: Task "concat" failed. Use --force to continue.
Versions:
Yeoman 1.0.4
Node 0.10.21
Bower 1.2.7
Grunt-cli 0.1.9
Grunt 0.4.1
Anyone seeing the problem? Thanks!
See this line in your gist. It's trying to call a task called concat in your Gruntfile, but that task doesn't exist. There may have been a change with the Yeoman webapp generator or you might have had a copy/paste issue or something. The assemble part of your Gruntfile looks fine.
I think you can remove the concat and carry on.
Related
I am attempting to set up a nuxt project with scss. I added the following packages to my project:
"sass": "^1.37.0",
"sass-loader": "10",
and I updated nuxt.config.js to say the following to point to my new scss main file:
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'~/assets/sass/main.scss'
],
I had to use older versions because i was getting errors with certain functions I was using but i managed to get it working correctly on my local machine, and it builds just fine repeatedly as I update code as well.
I am now trying to deploy to staging on a Linux/nginx server and I am getting the following errors when building npm run build:
ERROR in ./assets/sass/main.scss (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./assets/sass/main.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) postcss-custom-properties: <css input> Unknown word
> 1 | var(--font-size-2)/var(--font-ratio)
| ^
It looks like it's using css builder instead of sass builder! Does anyone know how to fix this? I doublechecked that the files on the server include the sass-loader and that the config is pointing to my .scss file, and i checked the documentation which states that Nuxt will automatically choose the correct loader.
What am I doing wrong?
Trying to build an Angular project and I'm getting the errors below. This project built fine last week. I made some changes to other projects that use the Dlls from this project, but no changes to this project. I already spent a lot of time troubleshooting it with no luck and appreciate any help.
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
This can sometimes happen if node-sass was compiled for a different version of Node.js than you're currently running (ie if you've recently changed your Node.js version). You can fix that with:
npm rebuild node-sass
if you are using webpack, and trying to use sass-loader, also add sass
I had this same issue when attempting to test an Angular library, and the issue was I had [``] instead of [] in the styles property of my component metadata.
Wrong
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [``],
Right
#Component({
selector: 'my-input',
template: `
<input
... />
`,
styles: [],
I had similar problem. I was trying to build an angular library and the message below appeared:
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'library-name'
------------------------------------------------------------------------------
Compiling TypeScript sources through ngc
ERROR: PostCSS received undefined instead of CSS string
An unhandled exception occurred: PostCSS received undefined instead of CSS string
See "/tmp/ng-itlEgm/angular-errors.log" for further details.
[12:03:38] 'compile' errored after 17 s
[12:03:38] Error: Command `ng build library-name --prod` exited with code 127
at ChildProcess.handleSubShellExit (/node_modules/gulp-run/command.js:166:13)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at ChildProcess.EventEmitter.emit (domain.js:505:15)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
[12:03:38] 'build' errored after 17 s
I was using gulp-run to execute the command ng build library-name --prod. But, executing the command ng build library-name --prod directly on the terminal, the log error was smaller, but similar too.
The problem was in one component. The component had one styleURL (Angular component decorator), like this:
...component.css
but, the library uses scss. So, I changed the path to:
...component.scss
and I executed the command 'ng build library-name --prod'. So, the error didn't appear again.
I was using NVM v0.35.2 (allow to have more than one NodeJS version installed in my machine); NodeJS v12.18.2; Ubuntu x64 18.0.4 LTS and Angular CLI 9.1.9.
I faced the same situation now and the command that helped me is -
npm i node-sass -D
Check the node version, see if the version of node changes cause this problem. I use node version 16.14.2 which occured this error, after switch to 12.16.1 it works well. Just check your node-sass and node version will find a way out.
This can happen due to change in version of node. I had same issue with a NUXT app. What I did was
using yarn, in the root directory of your project, run yarn. But if you're using npm run npm install
start your project again.
Here is my grunt-sass declaration.
sass: {
site: {
options: {
implementation: 'dart-sass',
style: 'compressed',
noCache: true
},
dist: {
files: {
'dist/css/jk.css' : 'src/sass/jk.scss'
}
}
}
},
When I run grunt, or grunt triggers on the watch clause, I get this output.
Running "sass:site" (sass) task
The file "dist/css/jk.css" is never created. I get no other output from Grunt. If I run sass from the command line, the file completes without any trouble.
I'm not sure why it's failing, as it's failing silently. If nothing else, I'd love to know how to enable verbose failures.
UPDATE. Tried running grunt with -v, this is the output.
Running "sass:site" (sass) task
Verifying property sass.site exists in config...OK
File: [no files]
Options: precision=10, implementation="dart-sass", style="compressed", noCache
undefined
It looks like I'm not declaring the files correctly. I'm quite certain the paths are correct. If I run sass from the command line with the same paths it succeeds as expected.
Adding -v or --verbose has returned errors. I'm still not able to compile sass, but the issue of the missing errors is resolved.
I'm using skipper to receive the files, sharp to resize (and save) and fs unlink to remove the old image. But I got a very weird error this time that concerns me a lot:
error: ** Grunt :: An error occurred. **
error:
Aborted due to warnings.
Running "copy:dev" (copy) task
Warning: Unable to read "assets/images/users/c8e303ca-1036-4f52-88c7-fda7e01b6bba.jpg" file (Error code: ENOENT).
error: Looks like a Grunt error occurred--
error: Please fix it, then restart Sails to continue running tasks (e.g. watching for changes in assets)
error: Or if you're stuck, check out the troubleshooting tips below.
error: Troubleshooting tips:
error:
error: *-> Are "grunt" and related grunt task modules installed locally? Run npm install if you're not sure.
error:
error: *-> You might have a malformed LESS, SASS, CoffeeScript file, etc.
error:
error: *-> Or maybe you don't have permissions to access the .tmp directory?
error: e.g., (edited for privacy)/sails/.tmp ?
error:
error: If you think this might be the case, try running:
error: sudo chown -R 1000 (edited for privacy)/sails/.tmp
Grunt stopped running and to have that in production is a big NoNo... I believe that this is caused because of concurrency with fs.unlinkSync(fname). The error is also intermittent and very hard to reproduce in some machines (IO ops/sec maybe?).
I have the following controller action:
var id = 1; // for example
req.file('avatar').upload({
dirname: require('path').resolve(sails.config.appPath, 'assets/images')
}, function(err, files){
var avatar = files.pop();
//file name operations here. output is defined as the path + id + filetype
//...
sharp(avatar.fd)
.resize(800, 800)
.toFile(output, (err, info)=>{
if(err){
res.badRequest();
} else {
fs.unlinkSync(avatar.fd);
res.ok();
}
});
});
Now I've been thinking about a few solutions:
Output the new image directly to .temp
Unlink when files exists on .tmp. Explanation: Grunt already copied the old file so removing it would be safe!
But I don't know if this is some spaghetti code or even if a better solution exists.
EDIT: My solution was, as proposed by arbuthnott, wrap a controller like this:
get : function(req, res){
var filepath = req.path.slice(1,req.path.length);
//remove '/' root identifier. path.resolve() could be used
if(fs.existsSync(path.resolve(filepath))){
return res.sendfile(filepath);
} else {
return res.notFound();
}
}
I think you are on the right track about the error. You are making some rapid changes to in the assets folder. If I read your code right:
Add an image with user-generated filename to assets/images (ex cat.jpg)
Copy/resize the file to an id filename in assets/images (ex abc123.jpg)
Delete the original upload (cat.jpg)
(I don't know the details of sharp, there may be more under the hood there)
If sails is running in dev mode, then Grunt will be trying to watch the whole assets/ folder, and copy all the changes to .tmp/public/. It's easy to imagine Grunt may register a change, but when it gets around to copying the added file (assets/images/cat.jpg) it is already gone.
I have two suggestions for the solution:
One:
Like you suggested, upload your original to the .tmp folder (maybe even a custom subfolder of .tmp). Still place your sized copy into /assets/images/, and it will be copied to /.tmp/public/ where it can be accessed as an asset by the running app. But Grunt will ignore the quick add-then-delete in the .tmp folder.
Two:
Do a bit of general thinking about both what you want to include in version control, and what Grunt tasks you want to be running in production. Note that if you use sails lift --prod then Grunt watch is turned off by default, and this error would not even occur. Generally, I don't feel like we want Grunt to do too much in production, it is more of a development shortcut. Specifically, Grunt watch can use a lot of resources on a production server.
The note about version control is just that you probably want some of the contents of assets/images/ to be in version control (images used by the site, etc), but maybe not in the case of user-uploaded avatars. Make sure you have a way to differentiate these contents (subdirectories or whatever). Then they can be easily .git-ignore'd or whatever is appropriate.
Hope this helps, good luck!
I am trying to use uglify with grunt to concat and minify some files. I have already used the npm to install grunt-contrib-uglify.
I have the following in my grunt.js file: (I have removed some other tasks for anonymity)
module.exports = function(grunt) {
'use strict';
grunt.loadNpmTasks('grunt-contrib-uglify');
uglify: {
options: {
sourceMap: 'app/map/source-map.js'
},
files: {
'app/dist/sourcefiles.min.js': [
'app/test_js/test.js'
]
}
}
};
I then run:
grunt uglify
but I keep getting the following error:
Warning: Maximum call stack size exceeded Use --force to continue.
If I use force, the grunt task never stops running.
Can someone tell me where I am going wrong? I am tearing my hair out on this one.
I had the same problem, using an other Grunt plugin called recess.
The error message was not explicit.
Warning: Cannot read property 'message' of undefined Use --force to continue.
But the verbose mode showed that my task was called hundred of times.
The problem was that I created a "cyclic dependency" (causing an infinite loop) when I registered my task.
grunt.registerTask('recess', ['recess']); //does not work => cyclic dependency!
The first parameter of registerTask method is an "alias task" and has to be different from the task names defined in the second parameter.
I corrected like this:
grunt.registerTask('my-recess-task', ['recess']);
And I runned the task calling this (in the Command prompt window)
grunt my-recess-task
And then it was OK!
More about registerTask() method, from grunt API:
http://gruntjs.com/api/grunt.task#grunt.task.registertask
I also met this problem, i solved this by removing
grunt.registerTask('uglify', ['uglify']);
before i solved this, i ran grunt uglify -v to check what happend.
I found it because that where you using this grunt.loadNpmTasks('grunt-contrib-uglify'); ,it implicitly executes the grunt.registerTask('uglify', ['uglify']); ^_^