I am using grunt connect server for maven angular project. I have some static files outside the angular folder. Is there way to redirect every call for file "redirect_folder/x/y/file.txt" to "target_folder/x/y/file.txt" just grunt need to change redirect_folder word for my static folder path.
Edit:
I copied the user.json to style folder, and trying to make style folder as a base but it doesnt works:
$http.get('user.json')
grunt.js:
grunt.initConfig({
connect: {
all: {
options: {
base: ['/media/data/project/src/main/webapp/resources/ngSrc/app'],
port: 10100,
hostname: "0.0.0.0",
livereload: true,
combine : [ '/media/data/project/src/main/webapp/resources/ngSrc/app', '/media/data/project/src/main/webapp/resources/ngSrc/app/style']
}
}
},
...
Related
can you help-me with this problem?
I need run a specific task depending of file modified, for example:
Modifie: _header.scss
Run: sass:header task
Modifie: _footer.scss
Run: sass:footer task
Modifie: _banners.scss
Run: sass:banners task
I've been trying to get the name of the file at save time to use it as a parameter, but I can not figure out ways to do this.
My project allows more people to work simultaneously but the work of defining which component of the project will be exported to CSS is manual, so I am trying to make this process of compiling the final CSS of each module as automatic.
My problem is how I can identify the name of the modified file, not the type of file.
Thank you very much!
It should look like this. When sass files are changed, grunt generates css files and copies (to dist directory) changed files only. Also as far as you can see connect and watch task implement live reload.
connect: {
options: {
port: ...
livereload: 35729,
hostname: '127.0.0.1'
},
livereload: {
options: {
base: [
'some dist'
]
}
}
},
// check that files are changed
watch: {
livereload: {
options: {
livereload: '<%= connect.options.livereload %>'
},
files: [
'your dist/*.css'
]
},
// when sass file is changed, tasks will run
// newer:copy means that we have to do task copy with changed files only
sass: {
files: ['your dir/*.sass'],
tasks: ['sass', ...some other tasks like cssmin..., 'newer:copy']
}
},
sass: {
dist: {
files: [
...sass to css
]
}
},
copy: {
css: {
....
}
}
Also you can be interested in task like grunt-changed. The task configures another task to run with src files that have been changed. For more information please check the page grunt-changed
I would like to now if there is a way to load certain files from a certain folder when running Grunt.
Let's say I have a folder structure that looks like this:
[html]
[css]
[js]
[custom]
[X] x.css
[Y] y.css
[Z] z.css
I'm trying to build my website for client [X] and need to add some custom css to their x.css file and just load that one to test.
What I would love to be able to do is run my grunt task (right now it runs sass, jsx compiler and spins up a localhost server with livereload) and say grunt client-x.
Which then would load my x.css file and all content of that folder but not use touch the [Y] and [Z] folder at all.
Is this possible with a task runner?
So I looked at Grunt dynamic dest location sass which seemed to solve my problem initially but I couldn't really get it to work the way I wanted to and it muddled up my existing grunt tasks I had already set up.
But then I found grunt options - this parameter solved all my problems. Grunt file below:
module.exports = function(grunt) {
var theme = grunt.option('theme')
grunt.initConfig({
concat: {
options: {
separator: 'rn'
},
dist: {
files: {
'js/script.js': 'themes/' + theme + '/js/custom.js'
}
}
},
watch: {
sass: {
files: ['themes/' + theme + '/**/*.{scss,sass}', 'themes/' + theme + '/_partials/**/*.{scss,sass}', 'sass/**/*.{scss,sass}', 'sass/_partials/**/*.{scss,sass}', 'themes/' + theme + '/js/custom.js'],
tasks: ['sass:dist', 'shell:upload', 'concat:dist'],
options: {
livereload: true,
},
},
livereload: {
files: ['*.vm', 'js/*.{js,json}', 'css/*.css','images/*.{png,jpg,jpeg,gif,webp,svg}', 'themes/' + theme + '/js/custom.js'],
options: {
livereload: true,
debounceDelay: 2000
}
}
},
sass: {
options: {
sourceMap: true,
outputStyle: 'nested'
},
dist: {
files: {
'css/lyria.css': 'themes/' + theme + '/styles.scss'
}
}
},
shell: {
options: {
stdout: true,
stderr: true
},
upload: {
command: './theme-uploader.sh'
}
},
})
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-shell');
grunt.registerTask('default', [
'sass:dist',
'concat',
'shell:upload',
'watch'
]);
};
As you can see the theme parameter is used as a argument for the grunt default task which then compiles the correct files to the correct place. When I run grunt --theme=x it watches and compiles the corresponding folders in that specific directory as set up by my different tasks.
The reason for this setup is that I'm developing and maintaining different child themes for different clients in the same repository. I need to be able to generate a client specific jar with their corresponding stylesheets and custom js.
This way I get to keep all my directories in the same repo and just specify when running my grunt task which client folder to get the css from.
I'm using Grunt for livereload only. It works fine, but I noticed that it has high CPU, and when I run it with "--verbose" I see that it's watching the whole "node_modules" folder.
So, I made some research, and tried to ignore this. Unfortunately, with no success.
My watch part of "gruntfile.js" is:
// the watch stuff ..
watch: {
all: {
files: ['!**/node_modules/**', 'js/**/*.js', 'css/**/*.css', 'index.html'],
options: {
interval: 5007,
livereload: true
}
}
},
and basically I'm saying I want grunt to watch all js, css and the index.html file. Explicitly added the code for ignoring "node_modules", but it still says it's watching it and the CPU goes around 30%. (Mac OSx)
==================
One thing I noticed though:
When I make a change in the "gruntfile.js" - for example add one more file to the "files" property of the "watch" task - then it restarts the grunt, and in the console I see it start watching only the files I want, and then CPU goes below 1%. (I guess it's how it should be originally.)
What am I doing wrong?
====================
Edit: Unfortunately, when I change the gruntfile and I see only the files I want are being watched - then the livereload stuff is no longer working.
====================
This is the article I started from:
http://thecrumb.com/2014/03/15/using-grunt-for-live-reload/
Here is my package.json file:
{
"name": "grunt-reload",
"version": "1.0.0",
"devDependencies": {
"grunt": "~0.4.3",
"matchdep": "~0.3.0",
"grunt-express": "~1.2.1",
"grunt-contrib-watch": "~0.6.0",
"grunt-open": "~0.2.3"
}
}
And here is my Gruntfile.js:
module.exports = function(grunt) {
require('matchdep')
.filterDev('grunt-*')
.forEach(grunt.loadNpmTasks);
grunt.initConfig({
// the web server ..
express: {
all: {
options: {
bases: [__dirname],
port: 8888,
hostname: 'localhost',
livereload: true
}
}
},
// the watch stuff ..
watch: {
all: {
files: ['js/**/*.js', 'css/**/*.css', 'index.html'],
options: {
livereload: true
}
}
},
// the automatic opening stuff ..
open: {
all: {
path: 'http://localhost:8888/index.html'
}
}
});
// create the server task ..
grunt.registerTask(
'server',
['express', 'open', 'watch']
);
}; // end of "module.exports" ..
And I start all of this with "grunt server".
edit: After you shared your Gruntfile, the problem became more clearer.
In your grunt-express config, you have set livereload to true and bases to __dirname, which is the folder Gruntfile in ran from.
Now, let's look at the grunt-express documentation:
bases
Type: String|Array Default: null
The bases (or root) directories from which static files will be served. A connect.static() will be generated for each entry of bases. When livereload is set to true (or set to a specific port number), a watch task will be created for you (at runtime) to watch your basePath/**/*.*.
(Emphasis mine)
So in your grunt-express config, you set your livereload to watch all the files in your basepath, which of course includes node_modules.
You have couple of options:
Remove your other watch task and config grunt-expresses basepath accordingly (just copy your other config basically).
Keep both of the watch tasks and just ignore the node_modules in the other grunt-express -> bases config.
Remove the bases and handle livereloading in the other watch task
Where is the node_modules folder located? If it's on root, you can just remove the node_modules parameter altogether as long as there aren't any matching glob patterns:
// the watch stuff ..
watch: {
all: {
files: ['js/**/*.js', 'css/**/*.css', 'index.html'],
options: {
interval: 5007,
livereload: true
}
}
},
Now you are watching: All .js-files under js folder, index.html on root and so on.
However if you have node_modules under js/node_modules, you can the explicitly ignore that folder and the files in it:
files: ['!js/node_modules/**', 'js/**/*.js', 'css/**/*.css', 'index.html'],
Anyway, depending on your Gruntfiles and node_module-folders location your configuration should work just fine anyway.
I can't seem to get the livereload option to work on the grunt-contrib-watch task.
I have the local host livereload.js file attached at the bottom of my html file.
When i go to http://localhost:35729/ all i get is the following:
{"tinylr":"Welcome","version":"0.0.5"}
Everything seems to be set up and working correctly. Even when i run grunt --verbose it says Live reload server started on port: 35729.
Below is my watch configuration in my gruntfile
Any help would be appreciated!
watch: {
options:{
livereload: true,
}
styles: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
},
html:{
files: ['site/**/*.html', 'includes/**/*.html'],
tasks: ['includes'],
options: {
nospawn: true,
}
}
}
});
The output you are seeing is correct. http://localhost:35729 is the LiveReload server, not your app.
Looking at your code, you haven't included the LiveReload script in your index.html.
I've sent you a pull request and can confirm the LiveReload is working.
I am trying to take my front-end workflow a step higher with Grunt tasks.
I have set up a couple of tasks in my Gruntfile.js. For now there are only grunt-contrib-sass and grunt-contrib-watch so that .css files are automatically recompiled whenever I make a change to my .sass files.
What I want to achieve is the following:
I want to add a task that would listen to my local server that was started with UniServerZ/XAMPP/WAMP or any other provider. I want to trigger a reload each time I edit any file in the server base directory.
I know that it is quite easy to set up such a task with, e.g. 'grunt-express' which starts a local server for you, but I really want to listen to a server started with UniServerZ/XAMPP/WAMP.
I will be grateful to see example configuration for such scenario if it is possible to achieve it.
Here is how I did it with Wamp 2.2 on Windows 7.
First, you need grunt-contrib-watch properly setup with livereload. I also use grunt-sass and not grunt-contrib-sass, because grunt-sass use Libsass. LibSass is a C/C++ port of the Sass engine, and it is faster.
To install them, use these commands :
npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev
Here is an example of Gruntfile :
module.exports = function(grunt) {
grunt.initConfig({
watch: {
sass: {
files: 'folder/to/your/sass/**/*.sass',
tasks: ['sass:dist'],
options: {
livereload: true,
},
},
//Watch your theme files
livereload: {
files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
options: {
livereload: true
},
}
},
sass: {
options: {
includePaths: ['where/to/find/additional/#import/scss/files'],
outputStyle: 'nested',
imagePath: 'how/to/rewrite/image/path',
sourceMap: true
},
dist: {
files: {
'output/file.css': 'input/file.scss'
}
}
},
});
// Default task
grunt.registerTask('default', ['watch']);
// Load NpmTask
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
};
You could save yourself some time with load-grunt-tasks, and remove the manual loading of task :
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
Then I use the livereload plugin for firefox (or chrome or safari).
Start the grunt watch task, open your site on localhost, and click on the icon in your browser. Now if you edit a watched file, the page should update accordingly.
A solution exist to add the livereload js in your Wordpress automatically (in function.php):
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
wp_enqueue_script('livereload');
}