{"id":26347291,"url":"https://github.com/survi218/grunt-configuration","last_synced_at":"2025-03-16T07:16:32.175Z","repository":{"id":139643113,"uuid":"92451159","full_name":"survi218/grunt-configuration","owner":"survi218","description":"Grunt,the task runner for web project.","archived":false,"fork":false,"pushed_at":"2017-05-25T23:20:02.000Z","size":6509,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-05T21:57:37.029Z","etag":null,"topics":["grunt","grunt-cli","grunt-configuration","grunt-plugins","grunt-task","grunt-watch","gruntfile","gruntjs","jshint","package-json","usemin-cli"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/survi218.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-25T22:57:53.000Z","updated_at":"2017-05-25T23:48:17.000Z","dependencies_parsed_at":"2023-07-23T07:46:43.179Z","dependency_job_id":null,"html_url":"https://github.com/survi218/grunt-configuration","commit_stats":null,"previous_names":["survi218/grunt-configuration"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgrunt-configuration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgrunt-configuration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgrunt-configuration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/survi218%2Fgrunt-configuration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/survi218","download_url":"https://codeload.github.com/survi218/grunt-configuration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243835926,"owners_count":20355616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grunt","grunt-cli","grunt-configuration","grunt-plugins","grunt-task","grunt-watch","gruntfile","gruntjs","jshint","package-json","usemin-cli"],"created_at":"2025-03-16T07:16:31.556Z","updated_at":"2025-03-16T07:16:32.150Z","avatar_url":"https://github.com/survi218.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grunt-configuration\n\nIn this repository, you will learn to use Grunt, the task runner. You will install Grunt CLI and install Grunt packages using NPM. Thereafter you will configure a Grunt file with a set of tasks to build and serve your web project. At the end of this exercise, you will be able to:\nInstall Grunt CLI and Grunt packages in your project\nConfigure a Grunt file with a set of tasks to build a web project from a source, and serve the built project using a server.\nInstalling Grunt\nNote: You should already have Node and NPM installed on your computer before you proceed further. Also, those using OSX or Linux should use sudo while installing global packages in node (when you use the -g flag).\nAt the command prompt, type the following to install Grunt command-line interface (CLI):\n\nnpm install -g grunt-cli\n\n\nThis will install the Grunt CLI globally so that you can use them in all projects.\nNext, create the package.json file in the conFusion folder with the following content\n\n{\n  \"name\": \"project name\",\n  \"private\": true,\n  \"devDependencies\": {},\n  \n  \"engines\": {\n    \"node\": \"\u003e=0.10.0\"\n  }\n}\n\n\nNext install Grunt to use within your project. To do this, go to the project folder and type the following at the prompt:\n\nnpm install grunt --save-dev\n\nThis will install local per-project Grunt to use within your project.\nCreating a Grunt File\nNext you need to create a Grunt file containing the configuration for all the tasks to be run when you use Grunt. To do this, create a file named Gruntfile.js in the conFusion folder.\nNext, add the following code to Gruntfile.js to set up the file to configure Grunt tasks:\n\n'use strict';\n\nmodule.exports = function (grunt) {\n  // Define the configuration for all the tasks\n  grunt.initConfig({\n\n  });\n};\n\n\nThis sets up the Grunt module ready for including the grunt tasks inside the function above.\n\nThe JSHint Task\nNext, we are going to set up our first Grunt task. The JSHint task validates our JavaScript code and points out errors and gives warnings about minor violations. To do this, you need to include some Grunt modules that help us with the tasks. Install the following modules by typing the following at the prompt:\n\nnpm install grunt-contrib-jshint --save-dev\nnpm install jshint-stylish --save-dev\nnpm install time-grunt --save-dev\nnpm install jit-grunt --save-dev\n\n\nThe first one installs the Grunt module for JSHint, and the second one adds further to print out the messages from JSHint in a better format. The time-grunt module generates time statistics about how much time each task consumes, and jit-grunt enables us to include the necessary downloaded Grunt modules when needed for the tasks.\nNow, configure the JSHint task in the Gruntfile as follows, by including the code inside the function in Gruntfile.js:\n\n// Time how long tasks take. Can help when optimizing build times\nrequire('time-grunt')(grunt);\n\n// Automatically load required Grunt tasks\nrequire('jit-grunt')(grunt);\n\n// Define the configuration for all the tasks\ngrunt.initConfig({\n  pkg: grunt.file.readJSON('package.json'),\n\n  // Make sure code styles are up to par and there are no obvious mistakes\n  jshint: {\n    options: {\n      jshintrc: '.jshintrc',\n      reporter: require('jshint-stylish')\n    },\n    \n    all: {\n      src: [\n        'Gruntfile.js',\n        'app/scripts/{,*/}*.js'\n      ]\n    }\n  }\n});\n\ngrunt.registerTask('build', [\n  'jshint'\n]);\n\ngrunt.registerTask('default',['build']);\n\n\nIn the above, we have set up time-grunt and jit-grunt to time the tasks, and load Grunt modules when needed. The JSHint task is set to examine all the JavaScript files in the app/scripts folder, and the Gruntfile.js and generate any reports of JS errors or warnings. We have set up a Grunt task named build, that runs the jshint task and the build task is also registered as the default task.\nNext, create a file named .jshintrc (Don't forget the . in front of jshintrc) in the conFusion folder, and include the following in the file:\n\n{\n  \"bitwise\": true,\n  \"browser\": true,\n  \"curly\": true,\n  \"eqeqeq\": true,\n  \"esnext\": true,\n  \"latedef\": true,\n  \"noarg\": true,\n  \"node\": true,\n  \"strict\": true,\n  \"undef\": true,\n  \"unused\": true,\n  \"globals\": {\n    \"angular\": false\n  }\n}\n\nNow you can run the grunt task by typing the following at the prompt:\n\ngrunt\n\nCopying the Files and Cleaning Up the Dist Folder\nNext you will install the Grunt modules to copy over files to a distribution folder named dist, and clean up the dist folder when needed. To do this, install the following Grunt modules:\n\nnpm install grunt-contrib-copy --save-dev\nnpm install grunt-contrib-clean --save-dev\n\n\nYou will now add the code to perform the copying of files to the dist folder, and cleaning up the dist folder. To do this, add the following code to Gruntfile.js. This should be added right after the configuration of the JSHint task.:\n\n},\n\ncopy: {\n  dist: {\n    cwd: 'app',\n    src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],\n    dest: 'dist',\n    expand: true\n  },\n  \n  fonts: {\n    files: [\n      {\n        //for bootstrap fonts\n        expand: true,\n        dot: true,\n        cwd: 'bower_components/bootstrap/dist',\n        src: ['fonts/*.*'],\n        dest: 'dist'\n      }, {\n        //for font-awesome\n        expand: true,\n        dot: true,\n        cwd: 'bower_components/font-awesome',\n        src: ['fonts/*.*'],\n        dest: 'dist'\n      }\n    ]\n  }\n},\n\nclean: {\n  build: {\n    src: [ 'dist/']\n  }\n}\n\n\nThen, update the Grunt build task in the file as follows:\n\ngrunt.registerTask('build', [\n  'clean',\n  'jshint',\n  'copy'\n]);\n\n\nYou can run Grunt and see what it generates.\nPreparing the Distribution Folder and Files\nWe are now going to use the Grunt usemin module together with concat, cssmin, uglify and filerev to prepare the distribution folder. To do this, install the following Grunt modules:\n\n npm install grunt-contrib-concat --save-dev\n npm install grunt-contrib-cssmin --save-dev\n npm install grunt-contrib-uglify --save-dev\n npm install grunt-filerev --save-dev\n npm install grunt-usemin --save-dev\n\n\nNext, update the task configuration within the Gruntfile.js with the following additional code to introduce the new tasks:\n\n    },\n    useminPrepare: {\n        html: 'app/menu.htm},\n\nuseminPrepare: {\n  html: 'app/menu.html',\n  options: {\n    dest: 'dist'\n  }\n},\n\n// Concat\nconcat: {\n  options: {\n    separator: ';'\n  },\n  \n  // dist configuration is provided by useminPrepare\n  dist: {}\n},\n\n// Uglify\nuglify: {\n  // dist configuration is provided by useminPrepare\n  dist: {}\n},\n\ncssmin: {\n  dist: {}\n},\n\n// Filerev\nfilerev: {\n  options: {\n    encoding: 'utf8',\n    algorithm: 'md5',\n    length: 20\n  },\n  \n  release: {\n    // filerev:release hashes(md5) all assets (images, js and css )\n    // in dist directory\n    files: [{\n      src: [\n        'dist/scripts/*.js',\n        'dist/styles/*.css',\n      ]\n    }]\n  }\n},\n  \n// Usemin\n// Replaces all assets with their revved version in html and css files.\n// options.assetDirs contains the directories for finding the assets\n// according to their relative paths\nusemin: {\n  html: ['dist/*.html'],\n  css: ['dist/styles/*.css'],\n  options: {\n    assetsDirs: ['dist', 'dist/styles']\n  }\n},\n\n\nNext, update the jit-grunt configuration as follows, to inform it that useminPrepare task depends on the usemin package:\n\nrequire('jit-grunt')(grunt, {\n  useminPrepare: 'grunt-usemin'\n});\n\n\nNext, update the Grunt build task as follows:\n\ngrunt.registerTask('build', [\n  'clean',\n  'jshint',\n  'useminPrepare',\n  'concat',\n  'cssmin',\n  'uglify',\n  'copy',\n  'filerev',\n  'usemin'\n]);\n\n\nNow if you run Grunt, it will create a dist folder with the files structured correctly to be distributed to a server to host your website.\nWatch, Connect and Serve Tasks\nThe final step is to use the Grunt modules watch, connect and watch, to spin up a web server and keep a watch on the files and automatically reload the browser when any of the watched files are updated. To do this, install the following grunt modules:\n\nnpm install grunt-contrib-watch --save-dev\nnpm install grunt-contrib-connect --save-dev\n\n\nAfter this, we will configure the connect and watch tasks by adding the following code to the Grunt file:\n\nwatch: {\n  copy: {\n    files: [ 'app/**', '!app/**/*.css', '!app/**/*.js'],\n    tasks: [ 'build' ]\n  },\n  \n  scripts: {\n    files: ['app/scripts/app.js'],\n    tasks:[ 'build']\n  },\n  \n  styles: {\n    files: ['app/styles/mystyles.css'],\n    tasks:['build']\n  },\n  \n  livereload: {\n    options: {\n      livereload: '\u003c%= connect.options.livereload %\u003e'\n    },\n    \n    files: [\n      'app/{,*/}*.html',\n      '.tmp/styles/{,*/}*.css',\n      'app/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'\n    ]\n  }\n},\n\nconnect: {\n  options: {\n    port: 9000,\n    // Change this to '0.0.0.0' to access the server from outside.\n    hostname: 'localhost',\n    livereload: 35729\n  },\n  \n  dist: {\n    options: {\n      open: true,\n      base:{\n        path: 'dist',\n        options: {\n          index: 'menu.html',\n          maxAge: 300000\n        }\n      }\n    }\n  }\n},\n\n\nThen add the following task to the Grunt file:\n\ngrunt.registerTask('serve',['build','connect:dist','watch']);\n\n\nNow if you type the following at the command prompt, it will build the project, and open the web page in your default browser. It will also keep a watch on the files in the app folder, and if you update any of them, it will rebuild the project and load the updated page into the browser (livereload)\n\ngrunt serve\n\nConclusions\nIn this project we have learnt how to configure a Grunt file to perform several tasks. You were able to build a distribution folder and start a server with livereload to serve the web page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurvi218%2Fgrunt-configuration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurvi218%2Fgrunt-configuration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurvi218%2Fgrunt-configuration/lists"}