grunt-js2head
install
npm install klyg-file2head
or package.json
...
"devDependencies": {
"grunt": "~0.4.5",
"klyg-file2head":""
},
...
Using
Example
see Gruntfile.coffee
and app
directory and then
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({
"file2head": {
options: {
"tag": "head",
"uri": "/"
"dist": "index.html",
"scanSourceFileDir": false,
"scanDistFileDir": false,
},
"lib": {
"src": ["app/js/lib/*.js"],
"dist": "app/index.html",
"tag":"head",
"uri": "http://localhost:3000",
"scanSourceFileDir": false,
"scanDistFileDir": false,
},
"js": {
"src": ['app/*.js', 'app/*/*.js'],
"dist": "test/index.html",
'tag': 'body',
},
"clear":{
"tasks": ["css"],
"src": ["*.html"],
"dist": ["body js"]
}
}
});
LICENSE
MI
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