setting up a new project that will have multiple grunt tasks that I want to load from task files.
when running my first task, 'core' which is supposed to build the core css for the site, I'm getting an error that I can't seem to resolve. been doing some googling and not finding this specific issue. any issues with the same error message usually were the result of a typo or misplaced curly braces on the part of the OP. Not sure that's the case here, but perhaps someone else sees what I'm obviously not seeing.
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: require('./package.json')
});
grunt.loadTasks('grunt-tasks');
};
grunt-tasks/grunt-core.js
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-sass');
grunt.config('core', {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
}
});
grunt.registerTask('core', ['sass:dist']);
};
error:
$ grunt core
Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.dist" missing. Use --force to continue.
Aborted due to warnings.
I've tried a few different things. If I change the registerTask to this:
grunt.registerTask('core', ['sass']);
I get this error:
$ grunt core
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
not sure if this is relevant, but here is package.json and some specs on the system I'm using.
Mac OSX Yosemite
node version v5.10.1
npm 3.8.3
package.json
{
"name": "TEST",
"version": "1.0.0",
"description": "test test test",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/path/to/repo"
},
"author": "me <me#example.com>",
"license": "ISC",
"bugs": {
"url": "https://github.com/path/to/repo/issues"
},
"homepage": "https://github.com/path/to/repo",
"devDependencies": {
"angular": "^1.5.5",
"bootstrap-sass": "^3.3.6",
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0",
"grunt-sass": "^1.1.0",
"jquery": "^2.2.3",
"sass-lint": "^1.5.1"
},
"dependencies": {
"jquery": "^2.2.3"
}
}
Looks like it was user error on my part.
in the task file, I had grunt.config(), but I should have had grunt.initConfig()
var taskConfig = {
sass : {
options : {
sourceMap : true,
includePaths : 'node_modules/bootstrap-sass/assets/stylesheets'
},
dist : {
files : {
'main.css' : 'main.scss'
}
}
},
concat : {
core : {
src : ['node_modules/jquery/dist/jquery.js', 'js/main.js'],
dest : "../dev/js/main.js"
}
}
};
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
grunt.initConfig(taskConfig);
grunt.registerTask('core', ['concat:core','sass']);
};
Related
my webpack doesn't generate file though no errors shown. PLS help :D
i'm new to all this so dont be harsh pls :D
code in webpack.config.js
module.exports = {
entry : ['./app/index.js'],
output : {
path : '/build',
filename: 'bundle.js'
}
}
using npm run build, no errors returned.
package.json
{
"name": "es6",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"webpack": "^3.10.0"
},
"description": ""
}
After making a fresh directory, copying in your code as is, I get the following:
Error: EACCES: permission denied, mkdir '/build'
at Error (native)
It's trying to access the root level /build directory (which doesn't exist, at least for me).
Tweaking the config a bit more leads to this:
const path = require('path')
module.exports = {
entry : ['./app/index.js'],
output : {
// Get the path including the current directory node is running in
path : path.resolve(__dirname, './build'),
filename: 'bundle.js'
}
}
Which spits out a successful bundle.
There were no errors? Any output at all?
I'm following a lecture on Angular With Webpack.
I am trying to add the less loader and keep getting an error.
ERROR in ./src/app.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../style.less in D:\projects\dev\webpack-angular-demo/src
# ./src/app.js 3:0-24
My webpack.config.js is :
module.exports = {
context: __dirname + '/src',
entry:'./app.js',
module:{
loaders:[
{
//create working environment for es6 need to npm i babel-loader babel-core babel-preset-es2015 -D
//https://github.com/babel/babel-loader
test:/\.js$/,
exclude:'/node_modules',
loader:'babel',
query: {
presets: ['es2015']
}
},
{
//take less convert to css and inject to style tag need to: npm i css-loader less-loader less style-loader -D
//https://github.com/webpack/less-loader
test:/\.less$/,
exclude:'/node_modules',
loader:"style!css!less"
}
]
}
};
My app.js is:
import '../style.less';
class Log{
constructor(){
console.log("sdfsdf");
}
}
new Log();
Inside the src directory i have the app.js , index.html and style.less files.
finally , this is my package.json file:
{
"name": "webpack-angular-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"css-loader": "^0.23.1",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
any idea why i'm getting this error ?
Thanks
i had the exact same problem like you. i managed to solve that with tiny change.
path.join(__dirname, 'src')
instead of using:
__dirname + '/src/
now, make sure that your webpack.config.js look like:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
...
and when I import the style.less i used like above
import './style.less';
If all files are in the same directory (src), the first line in app.js should be:
import './style.less';
I have a simple javascript file like this:
'use strict';
const sentences = [
{subject: 'Javascript', verb: 'is', object: 'great'}
{subject: 'Elephants', verb: 'are', object: 'large'}
];
function say ({subject, verb, object}){
console.log(`${subject} ${verb} ${object}`);
}
for(let s of sentences){
say(s);
}
And i`ve installed gulp for transcompiling purposes. Here's my gulp file:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', function(){
gulp.src("es6/**/*.js").pipe(babel()).pipe(gulp.dest("dist"));
gulp.src("public/es6/**/*.js").pipe(babel()).pipe(gulp.dest("public/dist"));
});
My javascript file is inside a 'es6' and a 'public/es6' folders. So when i run the gulp command, it should work, but it gives me these errors instead:
Joaos-MacBook-Air:chapter2 joaovictor$ gulp
[12:44:06] Using gulpfile ~/Desktop/javascript/chapter2/gulpfile.js
[12:44:06] Starting 'default'...
[12:44:06] Finished 'default' after 12 ms
events.js:141
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/joaovictor/Desktop/javascript/chapter2/.babelrc: Error while parsing JSON - Unexpected ''
at JSON5.parse.error (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:50:25)
at JSON5.parse.word (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:378:13)
at JSON5.parse.value (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:478:56)
at Object.parse (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/node_modules/json5/lib/json5.js:491:18)
at OptionManager.addConfig (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:225:62)
at OptionManager.findConfigs (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
at OptionManager.init (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
at File.initOptions (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:223:65)
at new File (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/file/index.js:140:24)
at Pipeline.transform (/Users/joaovictor/Desktop/javascript/chapter2/node_modules/gulp-babel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
What am i missing here?
I think some of the packages were not installed or compatible, regardless of that, you should make sure all dev-dependencies are installed , source code are available on Babel documentation website [https://babeljs.io/setup];
so your package.json file and .baberlc file should look like this:
{
"name": "nu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0-beta.2"
}
}
{
"presets": ["#babel/preset-env"]
}
so run your code...it should work just fine!!!
I am trying to run a simple bare bones grunt task and it is not working. I installed using npm install from this package:
{
"name": "ent-nmo-fasg-younger-mills-em-1",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-email-builder": "^3.0.1"
}
}
Then in my Gruntfile.js I have added this code:
module.exports = function(grunt) {
grunt.initConfi({
pkg: grunt.file.readJSON('package.json'),
emailBuilder: {
files : [{
expand: true,
src: ['dev/*.html'],
dest: 'dist/',
}]
}
});
grunt.loadNpmTasks('grunt-email-builder');
grunt.registerTask('dist',['emailBuilder']);
};
The error I am getting in terminal after trying to run "grunt dist" is:
Loading "Gruntfile.js" tasks...ERROR
TypeError: undefined is not a function
Warning: Task "dist" not found. Used --force, continuing.
My problem was a simple spelling error in the grunt configuration.
I am trying to set up some simple Grunt tasks but upon running them I get a Warning in the terminal "Warning: Task "default" not found.
I have simplified the gruntfile down to just one task, to reduce the chance this was caused by syntax errors but I am still getting the same warning...
gruntfile.js
exports.module = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
files: {
'/public/scripts/test.min,js' : ['/public/scripts/test.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
package.json
{
"name": "CustomersCRUD",
"version": "0.0.1",
"description": "Customer CRUD Application",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Dan Hutchinson",
"license": "ISC",
"dependencies": {
"express": "^4.6.1",
"serve-favicon": "^2.0.1"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.5.0"
}
}
warning given
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
Many thanks!
Okay, didn't catch this before but it's module.exports not exports.module
That should fix it. Also, I don't believe your file references need a / before them.
I see a comma here: '/public/scripts/test.min,js'
Could that be your issue?