klyg-file2head

v0.0.8

Published

2 years ago

A Grunt-plugin,find .js or .css file add to html tag

Downloads

0High
0Medium
0Low

huyinghuan

gruntplugin

grunt-js2head

install

npm install klyg-file2head

or package.json

    ...
    "devDependencies": {
        "grunt": "~0.4.5",
        "klyg-file2head":""
    },
    ...

Using

Example

  cd klyg-file2head

see Gruntfile.coffee and app directory and then

#run
grunt

watch the change of index.html after grunt

How to use it

If there is a directory struct:

app
  |- index.html
  |- css
      |- a.css, b.css
  |_ js
      |
      |-a.js, b.js
      |-lib
          |- lib.js

1. add `.js` or `.css` file to html

grunt.initConfig({
  "file2head":{
    js:{
      src: ['app/lib/*.js', 'app/*.js'],
      dist: ['app/index.html']
    }
  }
})

result: app/index.html

<html>
...
<head>
...
<script src="/app/lib/lib.js" grunt-type="js"></script>
<script src="/app/a.js" grunt-type="js"></script>
<script src="/app/b.js" grunt-type="js"></script>
</head>
...
</html>

2. set the root directory

grunt.initConfig({
  "file2head":{
    js:{
      src: ['lib/*.js', '*.js'],
      dist: ['index.html'],
      scanSourceFileDir: 'app',
      scanDistFileDir: ''app'',
    }
  }
})

result: app/index.html

<html>
...
<head>
...
<script src="/lib/lib.js" grunt-type="js"></script>
<script src="/a.js" grunt-type="js"></script>
<script src="/b.js" grunt-type="js"></script>
</head>
...
</html>

3. set the tag where the file will be added

the default tag is head. you can set the tag by yourself

grunt.initConfig({
  "file2head":{
    js:{
      src: ['lib/*.js', '*.js'],
      dist: ['index.html'],
      scanSourceFileDir: 'app',
      scanDistFileDir: ''app'',
      tag: "body"
    }
  }
})

result: app/index.html

<html>
...
<head>
...
</head>
<body>
....
<script src="/lib/lib.js" grunt-type="js"></script>
<script src="/a.js" grunt-type="js"></script>
<script src="/b.js" grunt-type="js"></script>
</body>
</html>

you also can use the simple css selector tag(but support is not complete)

grunt.initConfig({
  "file2head":{
    js:{
      src: ['lib/*.js', '*.js'],
      dist: ['index.html'],
      scanSourceFileDir: 'app',
      scanDistFileDir: ''app'',
      tag: "#hello"
    }
  }
})

result: app/index.html

<html>
...
<head>
...
</head>
<body>
....
<div id="hello">
<script src="/lib/lib.js" grunt-type="js"></script>
<script src="/a.js" grunt-type="js"></script>
<script src="/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

4.set the js file url

the defaule url is /, you can set ```uri`` to control it by yourself

grunt.initConfig({
  "file2head":{
    js:{
      src: ['lib/*.js', '*.js'],
      dist: ['index.html'],
      scanSourceFileDir: 'app',
      scanDistFileDir: ''app'',
      tag: "#hello",
      uri: "http://xxx.com"
    }
  }
})

result: app/index.html

<html>
...
<head>
...
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js" grunt-type="js"></script>
<script src="http://xxx.com/a.js" grunt-type="js"></script>
<script src="http://xxx.com/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

5. set default options

the setting in task will cover default options

grunt.initConfig({
  "file2head":{
    options:{
        scanSourceFileDir: 'app',
        scanDistFileDir: ''app'',
        dist: 'index.html',
        tag: "head",
        uri: "http://xxx.com"
    },
    js:{
      src: ['lib/*.js', '*.js'],
      tag: "#hello"
    },
    css:{
      src: ['css/*.css']
      uri: "http://www.com"
    }
  }
})

result: app/index.html

<html>
...
<head>
...
<link rel="stylesheet" href="http://www.com/css/a.css" grunt-type="css">
<link rel="stylesheet" href="http://www.com/css/c.css" grunt-type="css">
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js" grunt-type="js"></script>
<script src="http://xxx.com/a.js" grunt-type="js"></script>
<script src="http://xxx.com/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

6. how to clear tag

clear task by task name

grunt.initConfig({
  "file2head":{
    options:{
        scanSourceFileDir: 'app',
        scanDistFileDir: ''app'',
        dist: 'index.html',
        tag: "head",
        uri: "http://xxx.com"
    },
    js:{
      src: ['lib/*.js', '*.js'],
      tag: "#hello"
    },
    css:{
      src: ['css/*.css']
      uri: "http://www.com"
    },
    clear:{
      tasks: ['js']
    }
  }
})

after run "[file2head:js, file2head:css]" the result app/index.html is

<html>
...
<head>
...
<link rel="stylesheet" href="http://www.com/css/a.css" grunt-type="css">
<link rel="stylesheet" href="http://www.com/css/c.css" grunt-type="css">
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js" grunt-type="js"></script>
<script src="http://xxx.com/a.js" grunt-type="js"></script>
<script src="http://xxx.com/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

after run "[file2head:clear]" the result app/index.html change to

<html>
...
<head>
...
<link rel="stylesheet" href="http://www.com/css/a.css" grunt-type="css">
<link rel="stylesheet" href="http://www.com/css/c.css" grunt-type="css">
</head>
<body>
....
<div id="hello">
</div>
...
</body>
</html>

clear task by file name and selector

grunt.initConfig({
  "file2head":{
    options:{
        scanSourceFileDir: 'app',
        scanDistFileDir: ''app'',
        dist: 'index.html',
        tag: "head",
        uri: "http://xxx.com"
    },
    js:{
      src: ['lib/*.js', '*.js'],
      tag: "#hello"
    },
    css:{
      src: ['css/*.css']
      uri: "http://www.com"
    },
    clear:{
      src: ['*.html'],
      dist: ['head link']
    }
  }
})

after run "[file2head:js, file2head:css]" the result app/index.html is

<html>
...
<head>
...
<link rel="stylesheet" href="http://www.com/css/a.css" grunt-type="css">
<link rel="stylesheet" href="http://www.com/css/c.css" grunt-type="css">
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js" grunt-type="js"></script>
<script src="http://xxx.com/a.js" grunt-type="js"></script>
<script src="http://xxx.com/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

after run "[file2head:clear]" the result app/index.html change to

<html>
...
<head>
...
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js" grunt-type="js"></script>
<script src="http://xxx.com/a.js" grunt-type="js"></script>
<script src="http://xxx.com/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

you can use them at the some time

grunt.initConfig({
  "file2head":{
    options:{
        scanSourceFileDir: 'app',
        scanDistFileDir: ''app'',
        dist: 'index.html',
        tag: "head",
        uri: "http://xxx.com"
    },
    js:{
      src: ['lib/*.js', '*.js'],
      tag: "#hello"
    },
    css:{
      src: ['css/*.css']
      uri: "http://www.com"
    },
    clear:{
      task: ['js']
      src: ['*.html'],
      dist: ['head link']
    }
  }
})

after run "[file2head:js, file2head:css]" the result app/index.html is

<html>
...
<head>
...
<link rel="stylesheet" href="http://www.com/css/a.css" grunt-type="css">
<link rel="stylesheet" href="http://www.com/css/c.css" grunt-type="css">
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js" grunt-type="js"></script>
<script src="http://xxx.com/a.js" grunt-type="js"></script>
<script src="http://xxx.com/b.js" grunt-type="js"></script>
</div>
...
</body>
</html>

after run "[file2head:clear]" the result app/index.html change to

<html>
...
<head>
...
</head>
<body>
....
<div id="hello">
</div>
...
</body>
</html>

How add versions?

the setting in task will cover default options

grunt.initConfig({
  "file2head":{
    options:{
        scanSourceFileDir: 'app',
        scanDistFileDir: ''app'',
        dist: 'index.html',
        tag: "head",
        uri: "http://xxx.com",
        parameters:"?v=#P{new Date().getTime()-v0.1}"
    },
    js:{
      src: ['lib/*.js', '*.js'],
      tag: "#hello"
    },
    css:{
      src: ['css/*.css']
      uri: "http://www.com"
    }
  }
})

result: app/index.html

<html>
...
<head>
...
<link rel="stylesheet" href="http://www.com/css/a.css?v=1408670965087-v1.0" grunt-type="css">
<link rel="stylesheet" href="http://www.com/css/c.css?v=1408670965087-v1.0" grunt-type="css">
</head>
<body>
....
<div id="hello">
<script src="http://xxx.com/lib/lib.js?v=1408670965087-v1.0" grunt-type="js"></script>
<script src="http://xxx.com/a.js?v=1408670965087-v1.0" grunt-type="js"></script>
<script src="http://xxx.com/b.js?v=1408670965087-v1.0" grunt-type="js"></script>
</div>
...
</body>
</html>

Grunt-config

the example config see klyg-file2head/Gruntfile.coffee

  grunt.initConfig({
    // Configuration to be run (and then tested).
    "file2head": {
      options: {
        /**
        * The html tag which the .js or .css will be added.
        * String. Default: "head"
        * Support CSS seletor.(in the plugin use document.querySelector(tag) choose the dist tag)
        **/
        "tag": "head",
        /*
        * the root uri
        * String. Default: "/"
        * can set like:  http://localhost/xxx/xx 
        * the result is: http://localhost/xxx/xx/xx.js
        */
        "uri": "/"
        /*
        *  the html file path which the .js or .css will be added.
        *  String or Boolean. Default: false
        */
        "dist": "index.html",
        /*
        * set the source file directory that need be scaled
        * String or Boolean. Default: false
        * eg.   scaleSourceFileDir: 'app', src:[js/*.js]
        * the file *.js in app/js  will be found
        */
        "scanSourceFileDir": false,
         /*
          * set the dist file directory that need be scaled
          * String or Boolean. Default: false
          * eg.   scanDistFileDir: 'app', dist: 'index.html'
          * the file app/index.html  will be as dist file
          */
         "scanDistFileDir": false,
      },
      /*
      *task
      */
      "lib": { 
         "src": ["app/js/lib/*.js"],
         "dist": "app/index.html", //if it is undefine or false will use options.dist
         "tag":"head", //if it is undefine or false will use options.tag
         "uri": "http://localhost:3000", //if it is undefine or false will use options.root
         "scanSourceFileDir": false, // it will replace options.scanSourceFileDir
         "scanDistFileDir": false, //it will replace options.scanDistFileDir
      },
      /*
      *task
      */
      "js": {
        "src": ['app/*.js', 'app/*/*.js'],
        "dist": "test/index.html",
        'tag': 'body',
      },
      /**
      * How to clear html tag?
      * 1. clear task
      *   a. set the task name be 'clear' or 'clearXXX'
      *   b. set tasks be array that contain task name that you want clear
      *     for example: tasks: ["js"]  will clear the tag that be 'js' task added
      * 2. clear file
      *   a. set the file name in src
      *   b. set the tag css selector in dist.
      *      like this: "#main", will select the tag that id is main and then remove it
      * You can use one of them or  use them at the some time
      */
      "clear":{
        "tasks": ["css"],
        "src": ["*.html"],
        "dist": ["body js"]

      }
    }
  });

LICENSE

see grunt-file2head/LICENSE-MIT

Historty

v0.0.7

add clear file
add example.

v0.0.6

rename task name frome klyg-file2heead to file2head

v0.0.5

add clear tasks

v0.0.4

replace jsdom with cheerio
rewrite all file with coffeescript
undo: clear task

v0.0.3

Temp version

Fix a bug. when there are dirs in "src" can't resolve
Add a function. remove the html tags from html file

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

grunt-js2head

install

Using

Example

How to use it

1. add .js or .css file to html

2. set the root directory

3. set the tag where the file will be added

4.set the js file url

5. set default options

6. how to clear tag

clear task by task name

clear task by file name and selector

you can use them at the some time

How add versions?

Grunt-config

LICENSE

Historty

v0.0.7

v0.0.6

v0.0.5

v0.0.4

v0.0.3

1. add `.js` or `.css` file to html