This is the relevant part in my index.html:
<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery.js"></script>
<script src="scripts/vendor/bootstrap.min.js"></script>
<script src="scripts/vendor/handlebars.runtime.js"></script>
<script src="scripts/vendor/ember.js"></script>
<script src="scripts/vendor/ember-data.js"></script>
<script src="scripts/templates.js"></script>
<script src="scripts/neuterapp.js"></script>
<!-- endbuild -->
(but the last two entrires are wrong, that is actually my problem)
This is the relevant part of the Gruntfile.js:
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/*.html'],
css: ['<%= yeoman.dist %>/styles/*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
The problem that I have is that both templates.js and neuterapp.js are generated files, so they are not in <%= yeoman.app %>/scripts, but in <%= yeoman.dist %>/scripts.
This is my (simplified) directory structure:
webapp/
├── app
│ ├── app.js <--- for neuter
│ ├── controllers
│ ├── index.html
│ ├── models
│ ├── routes
│ ├── scripts
│ │ └── vendor <--- for usemin
│ ├── templates <--- for ember_templates
│ │ ├── template1.hbs
│ │ └── template2.hbs
│ └── views
├── dist
│ ├── index.html
│ └── scripts
│ ├── neuterapp.js <--- this must also be used for usemin!!!
│ └── templates.js <--- this must also be used for usemin!!!
└── Gruntfile.js
How can I tell usemin to include some generated files?
And in case this is needed, these are the configurations of neuter and ember_templates:
neuter: {
options: {
includeSourceURL: true
},
'<%= yeoman.dist %>/scripts/neuterapp.js': '<%= yeoman.app %>/app.js'
},
ember_templates: {
compile: {
options: {
templateName: function (sourceFile) {
return sourceFile.replace(/app\/templates\//, ''); // <%= yeoman.dist %>/scripts/
}
},
files: {
'<%= yeoman.dist %>/scripts/templates.js': [
'<%= yeoman.app %>/templates/**/*.hbs'
]
}
}
},
You might use the copy task to prepare what usemin needs in a temporary location.
What I suggest you do:
copy your needed app files from app to temp
Let your tasks which generate files output to temp
let your usemin & useminPrepare task run on temp and output to dist.
Related
I'm getting error message Can't resolve '../../images/hero.svg' while
I'm trying to import svg image from images folder
and set it in header.scss as a background image: background-image: url('../../images/hero.svg');
My gatsby structure:
├─ src
├── scss
│ ├── main.scss
│ ├── modules
│ └──── header.scss
└── images
└── hero.svg
gatsby-config.js:
module.exports = {
siteMetadata: {
title: 'Test',
description: 'test',
author: '#gatsbyjs'
},
plugins: [
'gatsby-plugin-react-helmet',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'images',
path: `${__dirname}/src/images`
}
},
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'Test',
short_name: 'test',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/android-chrome-192x192.png'
}
},
'gatsby-plugin-sass',
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /\.inline\.svg$/
}
}
}
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
]
}
Thanks.
Problem solved by creating static folder and placing svg file inside of it. Needed to also update path in scss file to '/hero.svg'
import heroSvg from '/hero.svg';
In the css, scss or css in js etc
background-image: url(${heroSvg});
background-repeat: no-repeat;
I have a Drupal sub-theme set up with the following structure:
├── scss
│ ├── _helpers.scss
│ ├── component
│ │ ├── _dashboard.scss
│ │ ├── _alert.scss
│ │ ├── _badge.scss
│ │ ├── _branding.scss
│ │ ├── _navbar.scss
│ │ └── _user-login-form.scss
│ ├── element
│ │ ├── _header.scss
│ │ └── _main.scss
│ ├── styles.scss
This is my GruntFile.js:
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
},
scripts: {
files: ['js/src/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
nospawn: true,
livereload: 45729
}
},
options: {
livereload: true,
},
},
sass: {
dist: {
files: {
'css/styles.css': 'scss/styles.scss'
}
}
},
jshint: {
myFiles: ['js/src/*.js']
},
concat: {
options: {
separator: ';',
},
dist: {
src: ['../../../libraries/popper.js/dist/umd/popper.js', '../../../libraries/bootstrap/dist/js/bootstrap.js', 'js/src/*.js'],
dest: 'js/scripts.js',
},
},
uglify: {
my_target: {
files: {
'js/scripts.min.js': ['js/scripts.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['watch']);
};
When I make a change in a scss file they compile into styles.css. In addition to this I would also like to have the ability to compile a css for each component.
For example:
├── scss
│ ├── _helpers.scss
....
....
└── components
├── component1
│ ├── component1.css
│ └── component1.scss
└── component2
├── component2.css
└── component2.scss
This way if component2 is only used on 1 page, I will only add that to that 1 page.
How can I set this up in my GruntFile?
Albertski. If I understood correctly you want to generate separate css files with that same scss folder structure. From what I'm seeing, you only need to take the _ (underline) before the name of the file you want and an automatically generated .css file will be generated.
To use this file wherever you want it is how you include it in your pages, for example use the "html--front.tpl.php" and there call your .css or include via hook.
I have the following gruntfile.js:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
uglify: {
options: {
manage: false
},
my_target: {
files: [{
expand: true,
cwd: 'assets/js',
src: '*.js',
dest: 'assets/js/min'
}]
},
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: [
{
expand: true, // Recursive
cwd: "assets", // The startup directory
src: ["**/*.less"], // Source files
dest: "assets/", // Destination
ext: ".css" // File extension
}
]
}
},
watch: {
styles: {
files: ['assets/**/*.less', 'assets/js/*.js'], // which files to watch
tasks: ['less', 'newer:uglify'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', ['less', 'watch', 'newer:uglify']);
};
And the following path distribution:
| assets
|-- folder-1
|-- less
|-- folder-2
|-- less
With the current gruntfile.js, my output is a sub-level of the less folder:
| assets
|-- folder-1
|-- less
|-- css
|-- folder-2
|-- less
|-- css
But it should be on the same level of the LESS file. For example:
| assets
|-- folder-1
|-- less
|-- css
|-- folder-2
|-- less
|-- css
Any idea on how to modify my gruntfile.js? Is that possible?
If I understand your correctly, you want a css/ folder as a sibling of a less/ folder in each of your folder-{x}/ folders.
This can be done by adding the rename property to your less task config:
files: [
{
expand: true, // Recursive
cwd: "assets", // The startup directory
src: ["**/*.less"], // Source files
dest: "assets/", // Destination
ext: ".css", // File extension
rename: function (dest, src) {
return (dest + src.replace('less/', 'css/'));
}
}
]
I have a folder structure like this
app
|
+- html
| +- index.html
+- assets
| +- js
| +- foo.js
| +- bar.js
+- dist
My Gruntfile.js is
module.exports = function (grunt) {
grunt.initConfig({
config: {
app: 'app',
dist: 'dist'
},
useminPrepare: {
html: 'html/index.html',
options: {
root: '<%= config.app %>',
dest: '<%= config.dist %>'
}
},
usemin: {
html: ['<%= config.dist %>/html/index.html'],
js: '<%= config.dist %>/assets/js/*.js'
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-rev');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('build', [
'useminPrepare',
'concat:generated',
'cssmin:generated',
'uglify:generated',
'usemin'
]);
};
in html/index.html
<!-- build:js /assets/js/optimized.js -->
<script src="/assets/js/foo.js"></script>
<script src="/assets/js/bar.js"></script>
<!-- endbuild -->
When I execute the 'grunt build' command, it shows "unable to process the task.required config property concat.generated missing" error.
What could be the reason?
If your Gruntfile.js is in a root location, then you have wrong html path in useminPrepare task. I'm not sure if useminPrepare understands 'root' option. Try this:
useminPrepare: {
html: 'app/html/index.html',
options: {
dest: '<%= config.dist %>'
}
}
My structure is like below. I want to copy assets folder from app directory to dist directory?
app
assets
imgs
css
fonts
index.html
dist
Set the current working directory to app. Select all subdirs and files of assets. Set the destination to dest.
grunt.initConfig({
copy: {
dist: {
cwd: 'app',
src: ['assets/**/*'],
dest: 'dist/',
expand: true
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.registerTask('default', ['copy:dist']);