Web Project js css static File Cache Solution

Web Project js css static File Cache Solution

During web development, JavaScript and css file caching often occurs. during the development process, you can manually clear the browser cache, however, we cannot tell users to execute an operation that they may not be familiar with (clear the browser cache). To solve this problem, we have compiled a grunt plug-in. During front-end construction, you can use the grunt plug-in to automatically add a version number to js and css files (here I use a timestamp)

The grunt-based js and css files automatically add version plug-ins. You can add a version number to all referenced files in the configured directory to the specified matching js and css files.

 

 

Description

 

 

Automatic-version-increment

 

Control the cache of assets by appending timestamp hash to asset url

Getting Started

This plugin requires Grunt~0.4.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. once you're familiar with that process, you may install this plugin with this command:

npm install automatic-version-increment --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('automatic-version-increment');

The automation taskOverview

In your project's Gruntfile, add a section namedautomaticTo the data object passedgrunt.initConfig().

grunt.initConfig({    automatic: {      js: {        options: {        },        assetUrl:'demo/js/hello.js',        files: {          'tmp': ['demo/index.html'],        },      },    },});

Usage ExamplesDefault Options

In this example, we have index.html which contains hello. js and hello.css. In Gruntfile. js, write as below, thengrunt, We can get the index.html which has assets url with timestamp.

assetUrlIs the css or js file pathfilesIs the file which contains the assets (usually is html file)

Notice to write the correct path.

grunt.initConfig({    automatic: {            js: {                options: {                    basicSrc: [src/main/webapp/public/js_control/]                },                assetUrl: ['**/*.js'],                files: {                    'tmp': ['src/main/webapp/views/**/*.jsp']                }            },            css: {                options: {                    basicSrc: [src/main/webapp/public/css/]                },                assetUrl: ['**/*.css'],                files: {                    'tmp': ['src/main/webapp/views/**/*.jsp']                }            }        }});

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.