I have this simple code on my gruntfile.js:
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
babel: {
options: {
sourceMap: true
},
dist: {
files: {
"dist/app.js": ["src/app.js"]
}
}
}
});
grunt.registerTask("default", ["babel"]);
};
But show me this error when run:
Warning: Task "babel" not found. Use --force to continue.
Aborted due to warnings.
Process finished with exit code 3
Any help? Never convert from ecmascript 6 to 5 :(
Here My files:
http://www.mediafire.com/download/nabq78bs323u47b/DemoBable.zip
I downloaded your code to try to help you. I did it. Please see my steps belows:
Step 1: Go to the root project directotry
cd DemoBable
Step 2: Install grunt
npm install --save-dev grunt
Step 3: Install load-grunt-tasks
npm install --save-dev load-grunt-tasks
Step 4: Install grunt-babel
npm install --save-dev grunt-babel
Step 5: Finaly, run it
grunt
The output should be:
Running "babel:dist" (babel) task
Done, without errors.
EDITED
To convert to code to ecma 5. Your gruntfile.js should be:
module.exports = function (grunt)
{
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
"babel": {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: {
"dist/app.js": "src/app.js"
}
}
}
});
grunt.registerTask("default", ["babel"]);
};
And you have to install babel-preset-es2015:
npm install --save-dev babel-preset-es2015
Related
I have just started using grunt and I want it to use combine all files and uglify them.
But my issues is that it combines and uglifys, but it doesn't remove import statements. (I'm using uglify and concat)
What I want -
// File.js
import something from './something.js';
something.someFunction("hello world");
and
// something.js
export default {
someFunction: function(msg){console.log(msg)}
}
to
// all.js
var something = {
someFunction: function(msg){
console.log(msg)
}
}
something.someFunction("hello world");
Compressing is not an issue.
If you want to combine the source code into one file, you can use rollup.js to help you.
download Node.js to get npm
update npm: npm install -g npm
npm install -g rollup
check: rollup -v
And then, running the below command will work as you expected.
rollup --format es --input file.js -o all.js
You can generate by rollup.config.js also.
rollup -c
// rollup.config.js
const AUTHOR = ""
const OutputFileName = `bundle` // in your case is `all`.js
const banner = `// Copyright (c) ..., all right reserved.`
const footer = `// powered by ${AUTHOR}`
export default {
input: './index.js', // in your case is `File.js`
output: [
{
file: `./${OutputFileName}.js`,
format: 'es', // amd, umd, iife, cjs, ...
// 👇 Option
// banner,
// footer
},
{ // You can generate different formats at once.
file: `./${OutputFileName}_cjs.js`,
format: 'cjs',
banner,
footer,
},
]
}
For compress
get uglifyjs: npm install uglify-js -g
uglifyjs all.js -m -c -o all.min.js
I just upgraded to Babel 7 (from 6) by running these commands:
npm remove babel-cli
npm install --save-dev #babel/cli #babel/core #babel/preset-env
Here is my .babelrc file:
{ "presets": ["env"] }
Then I ran:
babel js/src --out-dir js/dist
And it results in:
TypeError: Cannot read property 'bindings' of null
at Scope.moveBindingTo (/xyz/node_modules/#babel/traverse/lib/scope/index.js:867:13)
at BlockScoping.updateScopeInfo (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (/xyz/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (/xyz/node_modules/#babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/xyz/node_modules/#babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/xyz/node_modules/#babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/xyz/node_modules/#babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/xyz/node_modules/#babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/xyz/node_modules/#babel/traverse/lib/context.js:90:19)
What did I do wrong?
In your .babelrc file, change
{ "presets": ["env"] }
to
{ "presets": ["#babel/preset-env"] }
(and install that package if you haven't already).
In your .babelrc you are still referencing the package babel-preset-env (which is for 6.x), you want to reference #babel/preset-env instead (which is for 7.x).
https://github.com/babel/babel/issues/6186#issuecomment-366556833
Note: you should also make this change in webpack.config.js if it is there as well.
Here is the sample webpack config section where you should change the preset:
use: {
loader: 'babel-loader',
options: {
// Here you should change 'env' to '#babel/preset-env'
presets: ['#babel/preset-env'],
},
},
I'm fairly new to Grunt and trying to run a custom task using grunt-protractor-coverage plugin but I get the error
Warning: Task "undefined" not found. Use --force to continue.
My script is as follows.
module.exports = function(grunt) {
grunt.registerTask('test', 'Log some stuff.', function() {
console.log('Logging some stuff...');
});
grunt.initConfig({
instrument: {
files: 'server/**/*.js',
options: {
lazy: true,
basePath: "instrumented"
}
}
});
grunt.loadNpmTasks('grunt-protractor-coverage');
grunt.registerTask('instrument');
// Default task(s)
grunt.registerTask('default', ['instrument']);
};
I had this issue before, and solved it by updating grunt. Would be a good first step to try:
npm --global update grunt-cli
I'm running webpack in a docker container if that makes any difference.
My webpack.config.js:
module.exports = {
entry: './app/Resources/scripts/test.js',
output: {
filename: './web/js/bundle.js'
},
watch: true,
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
}
My test.js:
require('../styles/test.scss');
alert('Hello');
My file structure:
app/
--Resources/
----scripts/
------test.js
----styles/
------test.scss
web/
--js/
----bundle.js
webpack.config.js
My dockerfile is:
FROM ubuntu:latest
WORKDIR /app
RUN apt-get update
RUN apt-get install curl -y
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - && apt-get install nodejs -y
RUN npm install webpack sass-loader css-loader style-loader node-sass -g
CMD webpack
The JS compiles fine, works etc. However when trying to compile SCSS it fails with the error:
webpack_require(!(function webpackMissingModule() { var e = new Error("Cannot find module \"../styles/test.scss\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
I want to install package grunt-bower for my grunt by using npm install grunt-bower --save. After I install, I see package grunt-bower inside node_modules. Here is my gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
bower: {
dev: {
dest: 'public',
js_dest: 'public/javascripts',
css_dest: 'public/stylesheets'
}
},
watch: {
source: {
files: ['sass/**/*.scss', 'views/**/*.jade'],
tasks: ['sass'],
options: {
livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-bower');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['grunt-bower']);
};
I have register this as on official page : grunt.loadNpmTasks('grunt-bower'); But when I run grunt command, I meet this error:
Warning: Task "grunt-bower" not found. Use --force to continue.
I don't know why. Does I do something wrong ? Please tell me.
Thanks :)
You've defined the task you want to run as bower and not grunt-bower therefore,
grunt.registerTask('default', ['grunt-bower']);
should be
grunt.registerTask('default', ['bower']);