Using latest node and Grunt 0.4.x, react 0.10.x
What to via Grunt execute browserify on React JSX files that have requires on jquery in them:
var $ = require('jquery');
Tried moving the shim transformation into the package.json after reading about a similar problem. Have the following at the bottom of my package.json file:
"browser": {
"jquery": "./bower_components/jquery/jquery.min.js",
"bootstrap": "./bower_components/bootstrap/dist/js/bootstrap.min.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
},
"browserify": {
"transform": [ "browserify-shim" ]
}
Can't get it browserify to resolve on a simple JavaScript file (with just "var $ = require('jquery');) from Grunt. Gruntfile.js has:
browserify: {
options: {
debug: true
},
src: ['src/views/**/*.js'],
dest: 'build/javascript/client.js'
},
Running Grunt gives the following error:
Error: module "jquery" not found from "D:\\development\\projects\\Prenotes\\src\\views\\dummy.js"
If and when I get this working then I assume "reactify" can be added to the transform array in the package.json.
I put "reactify" in my transform segment in the package.json and redid the Grunt browserify as:
browserify: {
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
Without the "dist" browserify wouldn't run properly.
This got the shim to work but reactify wouldn't run, so I ended up switching back to grunt-react plus pulled the transform logic back into the Gruntfile.js (which just feels better).
So at the end of the package.json there is:
"browser": {
"jquery": "./lib/jquery/jquery.js",
"bootstrap": "./lib/bootstrap/bootstrap.js"
},
"browserify-shim": {
"jquery": {
"exports": "$"
},
"bootstrap": {
"exports": "bootstrap",
"depends": [ "jquery:$" ]
}
}
and in the Gruntfile.js:
browserify: {
options: {
debug: true,
transform: ['browserify-shim', require('grunt-react').browserify]
},
dist: {
files: {
'build/bundle.js' : ['src/views/**/*.jsx']
}
}
},
This both shims and processes the JSX. Finally.
Related
I've got several projects that each use an identical Gruntfile to run tasks and put the output in their own dist folder. Folder setup:
MyProjects
- Project1
- src
- dist
- Project2
- src
- dist
.....
I can't figure out how to run Grunt at the top level (MyProjects) and still have the output generated in the correct dist folder dynamically.
Is there a way I can have Grunt put the output in the correct dist folder without having to hard code it into the Gruntfile? Something like:
dist: {
files: {
// destination : source js
'<% ProjectName %>/dist/app.js': '<% ProjectName %>/src/app.js'
},
Thanks
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
// Project configuration.
grunt.initConfig({
watch: {
scripts: {
files: ['src/**/*.js'],
tasks: ['browserify', 'file_append', 'concat'],
options: {
spawn: false
}
},
sass: {
files: "src/scss/*.scss",
tasks: ['sass', 'file_append', 'concat']
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
// destination // source file
"format/css/styles.css": "src/scss/styles.scss"
}
},
options: {
sourcemap: "none",
style: "compact",
noCache: true
}
},
file_append: {
default_options: {
files: [
// Development build
{
append: "",
prepend: "",
input: "format/app.js",
output: "format/dev.app.js"
},
{
append: "</style>`)",
prepend: "document.body.insertAdjacentHTML('afterbegin', `\n<style>\n",
input: "format/css/styles.css",
output: "format/css/dev.styles.html"
},
// Production build
{
append: "</script>",
prepend: "<script>\n",
input: "format/app.js",
output: "format/prod.app.html"
},
{
append: "</style>",
prepend: "<style>\n",
input: "format/css/styles.css",
output: "format/css/prod.styles.html"
}
]
}
},
concat: {
options: {
seperator: '\n'
},
// Development build
dev: {
src: ['format/dev.app.js', 'format/css/dev.styles.html'],
dest: 'dev/dev.app.js'
},
// Production build
prod: {
src: ['format/prod.app.html', 'format/css/prod.styles.html'],
dest: 'dist/prod.app.html'
}
},
browserify: {
dist: {
files: {
// destination for transpiled js : source js
'format/app.js': 'src/app.js'
},
options: {
transform: [
[
'babelify', {
presets: "es2015",
comments: false,
plugins: "transform-object-rest-spread"
}
]
],
browserifyOptions: {
debug: false
}
}
}
}
});
grunt.registerTask('default', [
'sass',
'browserify:dist',
'file_append',
'concat',
'watch'
]);
};
There's a couple ways you can tackle this.
One option is to overload the arguments you pass to the task & include the folder name you wish to target.
grunt sass:dist:Project1
The additional argument is accessible via lodash templates which are a part of the GruntJS framework, and allows the configuration to be set at the time the task is ran:
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
// destination // source file
"MyProjects/<%= grunt.task.current.args[0] %>/format/css/styles.css": "MyProjects/<%= grunt.task.current.args[0] %>/src/scss/styles.scss"
}
},
options: {
sourcemap: "none",
style: "compact",
noCache: true
}
}
This approach works in the context of the function that's executing, but it wouldn't continue to pass the args to the next task. To do that, we need to add a custom task which will set a configuration object before executing the task list:
grunt.registerTask("build", (project) => {
const buildConfig = { project };
grunt.config.set("build", buildConfig);
grunt.task.run([
'sass',
'browserify:dist',
'file_append',
'concat',
'watch'
]);
});
Now when we run grunt build:Project1, your custom task build will run and set the property we passed in the grunt config object. We can then reference that value in our other grunt config objects using lodash like we did for the first option. To access config values with lodash templates, we just have to provide the config pointer in json notation:
files: {
"MyProjects/<%= build.project %>/format/css/styles.css": "MyProjects/<%= build.project %>/src/scss/styles.scss"
}
Grunt compiles the configs required for a task at the time they're run & will process the lodash templates then, allowing you to inject your project name into a task. Since we stored the value in the config object, the value will persist through until grunt completes and exits.
I am using grunt first time, I could able to concat css file using grunt-contrib-concat but I am getting following error while creating minified css file using grunt-conrib-cssmin
Error is :
>> TypeError: Cannot call method 'clone' of undefined
Warning: CSS minification failed. Use --force to continue.
My package.json file is :
{
"name": "grunt-test-project",
"description":"testing grunt css and js files minification",
"repository":"",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-cssmin" : "~0.10.0"
}
}
My Gruntfile.js file is :
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
css: {
src: [
'css/popup.css', 'css/styles_layouts.css', 'css/style.css', 'css/fileuploader.css','css/uniform.default.css',
'css/login_popup.css','css/validationEngine.jquery.css','css/ui-custom/jquery-ui.css'
],
dest: 'css/build/combined.css'
}
},
cssmin: {
css:{
src: 'css/build/combined.css',
dest: 'css/build/combined.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['cssmin']);
}
It will help me lot if you could provide some solution.
Thanks you
Your code is a bit different than the one at the grunt-contrib-cssmin documentation page.`
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'output.css': ['foo.css', 'bar.css']
}
}
}
`
You have a problem with cssmin configuration.
Try to change for it:
cssmin: {
css:{
files: {
'css/build/combined.min.css': ['css/build/combined.css']
}
}
}
Maybe this fix your problem.
Hope it helps.
Regards.
It may be that you forgot to register the task:
grunt.registerTask('default', ['concat', 'cssmin']);
Here is my workflow I have 20 scss files that are imported into one 'app.scss' see below
#import
"base/normalize",
"base/foundation/functions",
"base/settings",
"app/functions",
"app/mixins",
"app/components/icons",
etc
the SASS folder structure is organized 'SASS/base and SASS/base' root has one 'app.scss' file that imports everything
I compile compile and watch changes via 'Gruntfile.js' -- it looks something like this
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
watch: {
sass: {
files: 'sass/**/*.scss',
tasks: ['sass']
},
css: {
files: 'assets/**/*.css',
options: {
livereload: true
}
},
javascript: {
files: ['app/**/*.js', 'app/**/*.hbs'],
options: {
livereload: true
}
}
},
This is great for production but while in dev I would like to have different css files for debugging purposes..
is there a way of having multiple css files via Gruntfile and SASS for development without having to include 20 <link rel="stylesheet"... while in dev stage...
based on comment about using sourceMap, sourceComments here is what my grunt looks like
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
sourceComments: {
options: {
sourceComments: 'normal'
},
files: {
'assets/css/source-comments-app.css': 'sass/app.scss'
}
},
sourceMap: {
options: {
sourceComments: 'map',
sourceMap: 'source-map.css.map'
},
files: {
'assets/css/source-maps-app.css': 'sass/app.scss'
}
},
},
but am getting an error... is grunt suppose to get all the mapping information from app.scss for the sourcemap and sourceComments?
You can use a source map to easily identify which sass file a part of the compiled app.css comes from.
See the sourceComments and sourceMap options in the grunt-sass plugin.
I found the answer via grunt..after a lot of trials
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css',
sourceComments: 'map',
sourceMap:'assets/css/app.css.map'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
it has to be inside the options of the scss compile!
I'm using Grunt with Foundation 5 (a Foundation 5 Drupal subtheme, to be exact), and it worked when I added sourceComments: "map" to dist, like so:
dist: {
options: {
**YOUR OTHER OPTIONS HERE***
sourceComments: "map"
}
}
I'm new to bower and grunt and I just started my first project with the below bower dependancies:
bower.json
{
"name": "test",
"version": "0.0.0",
"authors": [
""
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"bootstrap-rtl": "~0.9.1",
"jquery-ui-bootstrap": "~0.2.5",
"jquery-ui": "~1.10.3",
"jquery": "~2.0.3"
},
"exportsOverride": {
"*": {
"js": "**/*.js",
"css": "**/*.css"
}
}
}
Gruntfile.js
module.exports = function(grunt) {
// Configuration goes here
grunt.initConfig({
bower: {
install: {
options: {
targetDir: './lib',
layout: 'byType',
install: true,
verbose: false,
cleanTargetDir: false,
cleanBowerDir: false,
bowerOptions: {}
}
}
}
//--end
});
// Load plugins here
grunt.loadNpmTasks('grunt-bower-task');
// Define your tasks here
grunt.registerTask('default', ['bower']);
};
I noticed that bower_components/bootstrap-rtl/ contains another Gruntfile.js.
Is there away to call bower_components/bootstrap-rtl/Gruntfile.js from my Gruntfile.js before the bower:install?
You can use --gruntfile to determine the location of the Gruntfile.
Check out the CLI source code for more info.
Example use:
grunt jshint --gruntfile bower_components/bootstrap-rtl/Gruntfile.js
You could also use grunt-grunt, which I just wrote for this kind of scenario.
You configure it like this:
grunt.initConfig({
grunt: {
boots: {
gruntfile: 'bower_components/bootstrap-rtl/Gruntfile.js',
tasks: ['some', 'tasks']
}
}
});
Then you could just set up an alias, such as below:
grunt.registerTask('build', ['grunt:boots', 'compile']);
Hope it works for you.
So I'm making my own Wordpress Framework, and am utilizing grunt and sass. I'm newer at grunt and sass, but experienced enough with grunt to kind of know what I'm doing, but I've used LESS in the past and not Sass.
I'm taking the Gruntfile.js file from roots.io as a starting point. Everything I have is correct as far as I know, but I'm not too sure about a couple of things. I removed the js stuff because I'm not going to be watching for it, and I added grunt-contrib-sass.
When running grunt watch I get this error:
grunt watch
/Gruntfile.js:22
watch: {
^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
Below is my Gruntfile.js and my package.json
Gruntfile.JS
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
version: {
options: {
file: 'lib/scripts.php',
css: 'assets/css/main.min.css',
cssHandle: 'su_styles'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'assets/css/main.min.css': [
'assets/scss/app.scss'
]
}
}
},
watch: {
sass: {
files: [
'assets/scss/*.scss',
'assets/scss/foundation/*.scss'
],
tasks: ['sass', 'version']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: false
},
files: [
'assets/css/main.min.css',
'templates/*.php',
'*.php'
]
}
},
clean: {
dist: [
'assets/css/main.min.css'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-wp-version');
grunt.loadNpmTasks('grunt-contrib-sass');
// Register tasks
grunt.registerTask('default', [
'clean',
'version',
'sass'
]);
grunt.registerTask('dev', [
'watch'
]);
};
package.json - with some stuff taken out to preserve a bit of privacy
{
"name": "sudoh",
"version": "1.0.0",
"author": "Brandon Shutter <brandon#brandonshutter.com>",
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-watch": "~0.5.3",
"grunt-wp-version": "~0.1.0",
"grunt-contrib-sass": "~0.5.0"
}
}
Thanks for your help ahead of time.
It seems there wasn't anything wrong with my setup. My code editor (Brackets) added hidden characters for whatever reason and was causing a syntax error. Switching over to Sublime and saving the file again allowed it work perfectly.
Thanks for the help everyone.