Having to re-deploy static files to see changes in javascript

Question

I have to run

sudo rm -rf var/*
sudo rm -rf pub/static/frontend/*
sudo bin/magento setup:static-content:deploy

to see any changes made in my js/scripts.js file. I am in developer mode.

Answer 1

When you are in developer mode, deleting the js from your static folder should be enough to regenerate it. My advice would be, just make a command line command where you quickly remove that file.

so it regenerates. that works for CSS as well. personally i run a gulp script that watches for changes in css file and deploys it to the specific pub directories as well. This helps me a lot with css. You can do the same for js.

Maybe you like to know what i use for css so you can apply something similar for js:

// Load gulp and plug-ins
var gulp    = require('gulp'),
    jshint      = require('gulp-jshint'),
    less        = require('gulp-less'),
    concat      = require('gulp-concat'),
    uglify      = require('gulp-uglify'),
    rename      = require('gulp-rename'),
    gutil       = require('gulp-util'),
    livereload  = require('gulp-livereload'),
    sourcemaps  = require('gulp-sourcemaps');


// Generate less to CSS.
gulp.task('less', function() {
    return gulp.src(['app/design/frontend/Vendor/theme/web/css/theme.less'])
        .pipe(less())
        .pipe( sourcemaps.write() )
        .pipe( livereload() )
        .pipe(gulp.dest('pub/static/frontend/Vendor/theme/nl_NL/css'))
        .pipe(gulp.dest('pub/static/frontend/Vendor/theme/de_DE/css'))
});


// Watch Files For Changes and livereload
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('app/design/frontend/Vendor/theme/web/css/**/*.less', ['less']);
});


gulp.task('default', ['less']);

Answer 2

You can write your code in static files,

pub/static/frontend/manento/theme/en_us/yourmodel/js/yourjs

You can change directory here and check change on the frontend , after all, work done then copy your code in the main file ( in your custom module or js) after that deploy content.