Export HTML/JS/CSS/LESS/... - snippets from page and include it in its own file.
npm install grunt-exporter> Export Snippets from Page/File and include it in its own file.
~0.4.5If 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:
``shell`
npm install grunt-exporter --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks('grunt-exporter');
#How to use:
`html`
X=type(css/less/js...) path/to/outputfile.
// Starttag
//Content here will be copy
// Endtag
to the data object passed into grunt.initConfig().`js
grunt.initConfig({
exporter: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
`$3
#### options.silent
Type:
Boolean
Default value: trueIf 'false' output in console
#### options.banner
Type:
String
Default value: Banner for your files
#### Default Options
In this example, the default options are used to do something with whatever. So if the
testing.html file has the content-tag the content of this tags will be written to file`js
grunt.initConfig({
exporter: {
dist: {
options: {
silent: true,
banner: "/\n Export from\n grunt-exporter\n https://www.npmjs.com/package/grunt-exporter\n https://github.com/stephanj79/grunt-exporter\n /\n\n"
},
files: {
src: ['test/fixtures/testing.html']
}
}
}
});
`#### Custom Options
Script search in 'test/fixtures/testing.html' and in all but only .html and .js files in 'test/expected/'
You can use css file or jade as well...
`js
grunt.initConfig({
exporter: {
dist:{
options: {
silent: false,
banner: "here my text..."
},
files: {
src: ['test/fixtures/testing.html', 'test/expected//.html', '/test/expected//.js']
}
},
});
`
$3
`html
Starttag X=type path/to/outputfile.X
//Content here will be copy
^Endtag
`
rename X with type like html,jade,js,css,scss,sass,less
$3
master.html
`html
.header {
position: fixed;
a:link, a:visited,a:hover {
text-decoration: none;
background: @MainColorLink;
i{
color:@MainColorBackground;
}
}
}
`Create files:
* include/test.js
`js
alert("TEST");
`
* include/ScrollTop.less
`css
.scroll-top {
position: fixed;
a:link, a:visited,a:hover {
text-decoration: none;
background: @MainColorLink;
i{
color:@MainColorBackground;
}
}
}
`
* include/test.css
`css
.site-footer-css {
min-height: 180px;
}
`In js files you can use "//" or in css "/*" if you want!
`js
//
alert("TEST");
//
`
`css
//
.site-footer-css {
min-height: 180px;
}
//
`Release History
* 1.0.0 Final Release
...
...
...
* Start Project
Tips and Tricks
use in html files
`html
``