Working with Grunt

Question

Working with Grunt

Navigation

#1 by (1 votes)

1

I have read a lot about some tools used to facilitate the workflow on the front end and I knew Grunt, I understood his function and when it might be useful, but I have the following doubt when I use Grunt to perform the tasks of minification, concatenation, etc., where should I save the new files? My question is because of the fact that I found it strange to create a directory with the same files from the original directory only as minified. To summarize, in a site in the site-teste/ directory what would the correct structure look like?

| site-teste/ | --img/ | --js/ | --css/ | --depois-do-Grunt/ | ----img/ | ----js/ | ----css/ | ----index.html | --index.html

javascript html css grunt

asked by anonymous 03.09.2015 / 16:14

1 answer

Diff Ignore whitespace and line breaks [duplicate] How to remove the border of text in a component?

score 1 · Accepted Answer

It is not really necessary for you to create a directory for each grunt action.

You can save the mined files within the same directory. For identification, to avoid that the file is replaced and by good practice add to the end of the filename something like *.min.js or *.min.css . This identifies the minified files.

You can also configure grunt to have a file development folder and another folder with the files for the production environment. Creating something similar to scaffolding below.

Gruntfile.js
dev-assets\
public\
   |  -  css\
   |  -  javascript\
   |  -  images\

So you can develop the files in a folder and Grunt feeds the folders that will go into production, with the files already minified.

To use the example above, you only need to configure your Gruntfile.js with the parameters indicating the folder where the files are and the folder that the mined versions should be stored. Example below with uglify of Grunt

uglify : {
    options: {
        banner: '/* Minify Javascript Version */'
    },
    js : {
        src : './dev-assets/file.js',
        dest : './public/javascript/scripts.min.js'
    }
}

With this snippet it takes the file in the development folder and minifies it in the production public folder. You can consult the plugins to do even more.