I've been using netbeans for a long time. I mostly work with php, html, css and javascript primarily in relation to wordpress theme and plugin development. I run Netbeans 8.0.2 (and for testing gulp the latest nightly build) under windows 7.
I'm just getting started with grunt and / or gulp (leaning towards the latter so far), at the moment to take advantage of autoprefixer - but I see a million other potential benefits of these systems.
There is one showstopper though. I got addicted to the "Upload files on save" feature years ago, and I'm not about to kick that habbit - the instant upload is a very central part of my workflow on almost all projects...
So far it has just silently handled anything I threw at it, and automatically uploaded any changed files no matter if I used netbeans, photoshop, windows explorer or any other external program to modify or move files around... but it doesn't play nice with the recently introduced gulp and grunt support.
If I run a gulp (or grunt) task and files are updated, netbeans doesn't detect the changes until the changed files are opened (or tabbed to if already open)... and so the updated files aren't uploaded.
If the task runs as a watch it doesn't seem to matter if I run it from CLI or from netbeans. If it's a "normal" task (ie. not a watch - I'm not quite comfortable with the lingo yet) and I run it manually by right-clicking the Gruntfile.js -> Grunt Tasks -> whatever then the changes are detected... but this isn't very convenient (compared to my usual "deployment procedure" of pushing CTRL+S). So far this built-in way of running tasks works for grunt - but not (yet?) gulp.
Only options I see is to:
- use an FTP plugin for grunt or gulp - very undesirable for a number of reasons
- run gulp on the server side - which would mean a major disruption of the normal workflow when full control of the server is not possible, which is often the case on external projects - it would also mean a lot of extra initial work to set up each new project serverside even when it is possible
Has anyone managed to get this working in a similar scenario?
-Any other suggestions / pointers are welcome too, if I'm simply going about it completely wrong.
More or less minimal (based on my so far limited knowledge) files to reproduce:
package.json:
{
"name": "grunt_gulp_test",
"version": "0.0.1",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Mikkel",
"license": "ISC",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-sass": "^0.9.2",
"grunt-contrib-watch": "^0.6.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.3.0",
"gulp-load-plugins": "^0.10.0",
"gulp-sass": "^2.0.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-util": "^3.0.4"
}
}
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
sass: { // Task
dist: { // Target
options: { // Target options
style: 'expanded'
},
files: { // Dictionary of files
'test_grunt.css': 'test.scss'
}
}
},
watch: {
scripts: {
files: ['test.scss'],
tasks: ['sass'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
grunt.registerTask('watch_it', ['sass', 'watch']);
};
gulpfile.js:
'use strict';
var gulp = require('gulp');
var gutil = require( 'gulp-util' );
var $ = require('gulp-load-plugins')();
gulp.task('styles', function () {
return gulp.src([
'test.scss'
])
.pipe($.sourcemaps.init())
.pipe($.sass({
precision: 10,
onError: console.error.bind(console, 'Sass error:')
}))
.pipe($.autoprefixer({browsers: ['> 5%']}))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.'));
});
gulp.task('default', ['styles']);
gulp.task('watch', ['styles'], function () {
gulp.watch(['test.scss'], ['styles']);
});
test.css:
div {
div {
display: flex;
background: #445552;
}
}
