I use the task uglify, cssmin and others grunt tasks.
For example, if I make just a change in my javascript or css files... the console shows me a loop about ten times:
... ETC
All changes and tasks works perfectly, but this curious loop is very strange.
This is my Gruntfile.js:
//Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
// Watch task config
watch: {
sass: {
files: "scss/*.scss",
tasks: ['sass']
},
cssmin: {
files: "css/*.css",
tasks: ['cssmin']
},
uglify: {
files: "js/*.js",
tasks: ['uglify']
}
},
// Sass task config
sass: {
dev: {
files: {
// fichero destino // fichero .scss
"css/custom.css" : "scss/custom.scss"
}
}
},
// BrowserSync task config
browserSync: {
default_options: {
bsFiles: {
src: [
"css/*.css",
"js/*.js",
"*.html"
]
},
options: {
watchTask: true,
proxy: "tutorialmaterialize.dev"
}
}
},
// UnCSS task config
uncss: {
dist: {
options: {
//Estilos que queremos limpiar
stylesheets : ['css/materialize.min.css'],
//Estilos que no queremos limpiar
ignoreSheets: [/custom.css/],
},
files: {
//Archivo css de salida //Scanea las clases, ids, etc de este html
'css/materialize.min.css': ['index.html']
}
}
},
// Cssmin task config
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {//Fichero combinado //Ficheros que vamos a combinar, 2 .css
'css/allcss.min.css': ['css/custom.css', 'css/materialize.min.css']
}
}
},
//Uglify task config
uglify: {
build: {
src: 'js/custom.js',//Ruta de fichero de entrada
dest: 'js/custom.min.js'//Ruta del fichero minificado
}
}
});
//Cargamos los grunt plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
//Default task
grunt.registerTask('default', ['browserSync', 'watch']);
};
How can i fix this? Thanks you.
Seems like the file output by uglify is being watched for changes, triggering uglify again, and so on...
Note that watch is configured to watch every file in the directory js
, and uglify is configured to output the results into js/custom.min.js
.
Change one of these, and the loop will stop.
For example (depending on what watch plugin you're using), you can probably change the configuration of watch
to watch the directory, excluding this single file, using the array and !
syntax, like this:
watch: {
uglify: {
files: ["js/*.js", "!js/custom.min.js"],
tasks: ['uglify']
}
},