In my source HTML I have:
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/angular-ui-notification/dist/angular-ui-notification.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.css" />
<link rel="stylesheet" href="../bower_components/nya-bootstrap-select/dist/nya-bs-select.css" />
<!-- endbower -->
made with grunt wiredep, that works great.
Moreover I want concat all this css to one file. I don't want to add this file manually in gruntfile.js. How can I use usemin or bower-concat to do this automatically. I'm doing the same with js file and everything works correctly.
For js I have
1.
wiredep: {
task: {
src: [
'src/index.html'
]
}
},
In html
< !-- bower:js -->
< !-- endbower -->
2.
bower_concat: {
dist: {
dest: 'src/temp/js/panel-dep.js',
cssDest: 'src/temp/css/panel-dep.css',
bowerOptions: {
relative: false
},
mainFiles: {
package: [ 'path/to/its/file.css' ]
}
}
},
3.
uglify:{
options:{
manage: false
},
dist:{
files:{
'dist/js/panel.min.js': ['src/temp/js/**/*.js']
}
}
},
Then I get nice working panel.min.js and HTML with link to this file
Related
I am combining all my js files for production using unglify but after combining them and generating my final app.min.js file, how I can update the script src?
The index file should have only one <script> tag with app.min.js but instead its pointing to all sources that I used on develop mode.
uglify: {
options: {
mangle: false
},
all: {
files: [{
expand: true,
cwd: 'dev/assets/js',
src: ['*.js', '**/*.js'],
dest: 'prod/assets/js'
}]
},
my_target: {
files: {
'prod/js/app.min.js' : ['prod/assets/js/**/*.js']
}
}
}
Take a look at the node package 'grunt-processhtml'. It will update the source links in your html file.
<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script src="app.min.js"></script>
I intend to develop an angularJS client where I will use angular components. This will lead to multiple .js/.css files.
In order to avoid manually referencing each newly added js/css file I intend to use a grunt-include-source task.
The problem is that, after configuring the Gruntfile.js, the „grunt includeSource” task runs, returning „Done, without errors.” status but no update is made in the index.html file.
My project structure is the one presented in the attached picture (I use WebStorm as IDE).
My index.html file is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RavenApp</title>
<!-- include: "type": "css", "files": "*.css" -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- include: "type": "js", "files": "*.js" -->
</body>
</html>
My Gruntfile.js is the following:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
templates: {
html: {
js: '<script src="{filePath}"></script>',
css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
}
},
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
Could anyone indicate me what I have done wrong?
Thank you.
We don't need to write templates key under includeSource key:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
HTML code is enough for including js and css:
<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->
Ok guys, Im trying to understand this but I cant find any basic tutorials.
I have uncss, this is my basic task
uncss: {
dist: {
src: ['about.htm', 'index.htm'],
dest: 'css/tidy.css',
options: {
report: 'min' // optional: include to report savings
}
}
}
next I have grunt-processhtml, I am trying to write a task to replace all css in index.htm
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
and turn it into
<link media="all" rel="stylesheet" href="/css/tidy.css">
Im not sure how to do this, I know I use grunt-processhtml like
processhtml: {
dist: {
files: {
'index.html': ['index.html'],
'about.html': ['about.html']
}
}
}
but how do I replace all
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
with my new tidy.css ?
Please guys, I need some basic help.
Another option is to use grunt-string-replace.
I use it for srcset, because grunt-processhtm can't handle multiple sourceset attributes. E.g.:
<img srcset="../img/img_one_400.jpg 400w,
../img/img_one_600.jpg 600w,
../img/img_one_1200.jpg 1200w,
../img/img_one_1408.jpg 1408w"
sizes="100vw"
src="../img/img_one_1408.jpg"/>
configuration in the Gruntfile.js:
'string-replace': {
inline: {
files: {
'build/pages/': 'build/pages/*.html'
},
options: {
replacements:[
{
//../img/ -> recources/img/
pattern: /\.\.\/img\//g,
replacement: 'fileadmin/img/'
}
]
}
}
}
In your case it would be something like:
[...]
options: {
replacements:[
{
pattern: /\/css\/some\.css/g,
replacement: '/css/tidy.css'
}
]
}
[...]
According to grunt-processhtml you can use the following to output the CSS links according to the environment. I am not sure how to define the environment though (check the documentation).
If it's dist the tidy.css file will be created alreay and it will be linked
<!-- build:template
<% if (environment === 'dev') { %>
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
<% } else { %>
<link media="all" rel="stylesheet" href="/css/tidy.css">
<% } %>
/build -->
I have a task to cdnize my files:
gulp.task('makeCdn', function () {
gulp.src(['./Views/SharedTemplates/*.cshtml'])
.pipe(cdnizer({
relativeRoot: './wwwroot/lib',
allowMin: true,
files: [
{
cdn: "google:angular"
},
{
cdn: "google:jquery"
},
{
cdn: "cdnjs:select2"
},
{
cdn: "cdnjs:twitter-bootstrap",
package: "bootstrap"
}
]
}))
.pipe(gulp.dest('./Views/Shared/'));
});
It nicely converts the js references, e.g. from:
<script src="../../wwwroot/lib/select2/select2.js"></script>
to:
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
BUT - it leaves the css links untouched:
<link rel="stylesheet" href="../../wwwroot/lib/select2/select2.css" />
.
And an additional question, why it's making such conversion from:
<script src="../../wwwroot/lib/angular/angular.js"></script>
<script src="../../wwwroot/lib/angular-resource/angular-resource.js"></script>
to:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
I am using standard minify/uglify for css/js files and combine multiple files to main.min.css or app.min.js... However my .html file needs to be modified to point to these new file names too in <link> or <script>
Is there a way to automate this? Or how to modify .html files automatically to rename the file names in there using gruntjs?
You can do this with grunt-string-replace. Here's an example on how you could use it.
In my index.html you find the following import tags:
<!--start PROD imports
<script src="assets/dist/traffic.min.js"></script>
end PROD imports-->
<!--start DEV imports-->
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
<!--end DEV imports-->
Notice the 'start imports' and 'end imports' comments. By default (in DEV) we comment out the PROD import.
In my grunt file I then add the following task:
'string-replace': {
inline: {
files: {
'index.html': 'index.html'
},
options: {
replacements: [
{
pattern: '<!--start PROD imports',
replacement: '<!--start PROD imports-->'
},
{
pattern: 'end PROD imports-->',
replacement: '<!--end PROD imports-->'
},
{
pattern: '<!--start DEV imports-->',
replacement: '<!--start DEV imports'
},
{
pattern: '<!--end DEV imports-->',
replacement: 'end DEV imports-->'
}
]
}
}
}
Running the task (grunt string-replace) gives me:
<!--start PROD imports-->
<script src="assets/dist/traffic.min.js"></script>
<!--end PROD imports-->
<!--start DEV imports
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
end DEV imports-->
Now the DEV imports have been commented out, while the PROD import is no longer commented out.
This is easily automated with grunt-processhtml. Here's an example from the docs:
<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script src="app.min.js"></script>
Read more at https://www.npmjs.org/package/grunt-processhtml
A very suitable grunt task for this is grunt-html-build
It can substitute some some parts of the HTML from dev to a production version. See examples there, it is easy to setup.
Now, using the standard configuration presented for grunt-html-build, if minified files are dynamically named during build process like:
some-file.js -> another-name.min.js
One can configure grunt-html-build with:
[...]
scripts: {
bundle: [
'<%= fixturesPath %>/scripts/*.min.js'
]
},
[...]
A HTML section like:
<!-- build:script bundle -->
<script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
<script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
<script type="text/javascript" src="/path/to/js/app/module1.js"></script>
<script type="text/javascript" src="/path/to/js/app/module2.js"></script>
<!-- /build -->
Would yield to something like:
<script type="text/javascript" src="scripts/other-name.min.js"></script>
<script type="text/javascript" src="scripts/another-other-name.min.js"></script>
That is what #hyprstack is asking for in comments.
You could use grunt preprocess to do this: https://github.com/jsoverson/grunt-preprocess
Basically, you need to set up a template and have preprocess replace the relevant parts.
The Gruntfile part will look something like this:
preprocess: {
dev: {
options: {
context: {
DEBUG: true,
HOST: '<%= env.dev.HOST %>'
}
},
files: {
'index.html': 'tpl/index.tpl'
}
},
production: {
options: {
context: {
DEBUG: false,
HOST: '<%= env.production.HOST %>
}
},
files: {
'index.html': 'tpl/index.tpl'
}
}
},
I am using Middleman App do distinguish between dev vs build in my html or haml file:
- if development?
and
- if build?