How to Work with Grunt

Asked

Viewed 62 times

1

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

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

javascript html css grunt

1 answer

1


It’s actually not necessary for you to create a directory for each Grunt action.

You can save the minified files inside the same directory. For identification, prevent the file from being overwritten and by good practice add to the end of the file name 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 to production, with the files already minified.

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

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

With this excerpt he takes the file in the development folder and minifica it in the public folder of production. You can consult the plugins to do even more.

  • 1

    I knew I could save wherever I wanted, I just wanted to know what the most indicated way, that what I saw in your reply is to create a folder with the Assets minified or concatenated, etc, right? This for a better organization and greater productivity, I understood right??

  • Exactly, each one chooses the best way to work. I prefer to create a development folder, where I keep the Assets without minification. Since Grunt is a Runner task, you can create a deploy automator that selects only the folder with the ready Assets, or just take the public folder and put it on the server if applicable. It’s to your taste.

Browser other questions tagged javascript html css grunt

You are not signed in. Login or sign up in order to post.