I currently am using a Yeoman seed project which comes with a Gruntfile and I'm having some trouble understanding parts of it. One particularly confusing thing is that during the development phase my SASS files are compiled into CSS and placed into a .tmp directory. My project however looks for main.css under app/styles yet the only thing there is my scss file. How is my project able to find main.css when it's not where it's looking?
./myApp
--Gruntfile.js
--.tmp
----main.css
--./app
----styles
------main.scss
When I create the dist folder the main.css file is placed correctly where it should be.
I think it may have to do with the compass or live-reload plugin.
I believe that you are talking about the situation when you ran grunt serve.
In the situation, the built-in server provides files under both .tmp and app directories by default which is specified for grunt-contrib-connect in Gruntfile like followings.
// The actual grunt server settings
connect: {
...
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= config.app %>'
]
}
},
This is why "styles/main.css" in index.html file goes to .tmp/styles/main.css.
Related
I have a grunt script (written by someone else) which is minify'ing images, but the the source and destination are the same folder, which to my mind appears to be overwriting the source with the minified images.
Here is a section from the gruntfile.js
imagemin: {
options: {
compress: true
},
dist : {
files: [
{
expand: true,
cwd : 'templates',
src : ['**/*.{png,jpg,gif}'],
dest : 'templates'
}
]
}
}
There is also a 'watch' task and 'newer' is in use so files are not reprocessed.
Is this ok? Or should the source and destination always be different? I don't think 'jpg' and 'gif' come in a 'lossless' flavour. I've been told that because the script is using 'newer', it keeps a cache of what it's done that survives a restart.
That sounds like a horrible idea. (I mean that it's written to overwrite the same directory, that's insane!)
You can definitely change src to src: ['large/**/*.{png,jpg,gif}'], and drop the original images there.
newer will still keep track of which files have already been compressed, but you'll still have access to the original high-res images in a separate large folder.
MORE:
Though in my own projects, I have a src folder at the top-level directory for the project, so src/img/**/* is compressed and output to just img. It's a complete split between the source files that all go in a top-level src directory, and production ready is everything but src at the top for static sites, or in a dest/build/whatever directory for more involved projects at the top.
I have a simple ASP .NET 5 empty project - with npm and grunt installed.
I've used npm to install a few client-side libraries, at present located in the node_modules directory directly under my ASP .NET project.
I want to copy the relevant files (for example, jquery.min.js) from the node_modules folder into the wwwroot folder.
It's unclear to me how to use grunt to do this - as each node module has it's own dependency tree, and there doesn't seem to be any consistency in the file structure from package to package.
I could write a grunt task explicitly for each client side library I use, but in that case I may as well download everything manually and place the files where I need them manually, avoiding npm all together.
I know I could use bower, which has a flat dependency tree - which is probably the root I should go down - but I've read a few articles saying "there's no need for bower - npm can do it all" and therefore I would like to know if there's a way to do this purely with npm.
Is there a way? Or is the "npm can do it all" statement aimed at projects that will require the components directly from the node_modules?
TL DR; Is bower a better fit than npm for ASP .NET 5 projects with separation of source and build files, and if not, what's the recommended way of doing it purely with npm?
I don't fill me professional in grunt, but I use it myself and I think that I can explain you how one can use it corresponds to your requirements.
First of all you should add "New Item" to your project, choose "Client-Side" and "NPM Configuration file" to add package.json to the the project (in the same directory where you have project.json). I suppose you have already created the file, but the existence of the file is important for grunt too. Then you adds some dependencies, which you need on the client-side to "dependencies" part of package.json and add at least grunt and grunt-contrib-copy to "devDependencies" part. An example of the file you will see below
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"dependencies": {
"font-awesome": "^4.5.0",
"jquery": "^1.11.3"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.7.0",
"grunt-contrib-copy": "^0.8.2"
}
}
Now you should add "Grunt Configuration File" in the same way like you added "NPM Configuration file". You will create gruntfile.js (in the same directory where you have project.json). Finally you should fill gruntfile.js with more helpful code. For example the code
module.exports = function(grunt) {
grunt.initConfig({
clean: ["wwwroot/font-awesome/", "wwwroot/jquery*.*"],
copy: {
main: {
files: [
{
src: "node_modules/font-awesome/css/*",
dest: "wwwroot/font-awesome/css/",
expand: true,
filter: "isFile",
flatten: true
},
{
src: "node_modules/font-awesome/fonts/*",
dest: "wwwroot/font-awesome/fonts/",
expand: true,
filter: "isFile",
flatten: true
},
{
src: "node_modules/jquery/dist/*",
dest: "wwwroot/",
expand: true,
filter: "isFile",
flatten: true
}
]
}
}
});
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.registerTask("all", ["clean", "copy"]);
grunt.registerTask("default", "all");
};
registers two tasks: clean and copy and the aliases all and default. You can select gruntfile.js file in the solution explorer, open context menu and choose "Task Runner Explorer". You will see all defined tasks. The task with the name "default" will be executed if you execute grunt without parameters (without the task name) in the command line.
Now you can choose some task and run it. You can choose some task, click right mouse button to open context menu and check "After Build" in "Bindings":
Now the task will be executed every time when you build the project. You can click optionally "V" button on the left side to see verbose information from the executed tasks.
I hope it's already the main information which you need. Many other helpful information about plugins grunt-contrib-clean, grunt-contrib-copy, grunt-contrib-jshint, grunt-jscs, grunt-newer and many other you will find yourself. One official place of ASP.NET 5 documentation should be mentioned. It's the place.
P.S. You asked additionally about the usage of bower. I find both npm and bower not perfect, but still very practical. I would prefer to hold full control over the dependencies and especially about the data, which will be copied under wwwroot. Thus I change the content of .bowerrc file from { "directory": "wwwroot/lib" } to { "directory": "bower_components" } and I use grunt to copy the required data from bower_components in the same way like I do this with files from node_modules. See the article for more details. In other words I use packages published only in bower repository in the same way like I use npm packages.
I searched alot and already found some links but none of them solved my issue. I use grunt-rev to revision my assets. This works. What was not working is, that the revisioned files are not used if I execute task grunt usemin.
The usemin config looks like this:
usemin: {
html: './app/views/environment/production/index.blade.php',
options: {
assetsDirs: ['./public/assets/dist/stylesheets']
}
},
The directory stylesheets has a file named 58640bd4.default.css
Can someone help me ?
I am using Compass through grunt to compile a SASS file. My directory structure looks like this:
project/
Gruntfile.js
package.json
sass/
part1/
part1.sass
css/
And my Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
std: {
options: {
sassDir: 'sass',
cssDir: 'css',
specify: 'sass/part1/part1.sass',
raw: 'disable_warnings = true\n'
}
}
}
});
When I run my gruntfile, Compass outputs to project/css/part1/part1.css, but I want it to output to project/css/part1.css instead. How can I do this? Right now I am using an on_stylesheet_saved hook to move the file, but it is not very elegant.
Hopefully the question is clear, and thanks in advance.
I recreated your environment. I could simplify the Gruntfile.js even more:
module.exports = function(grunt) {
// Main project configuration
grunt.initConfig({
// Read NPM package information
pkg: grunt.file.readJSON('package.json'),
// Compass
compass: {
std: {
options: {
cssDir: 'css',
sassDir: 'sass'
}
}
}
});
// Load the grunt tasks
grunt.loadNpmTasks('grunt-contrib-compass');
// Compile production files
grunt.registerTask('std', [
'compass:std'
]);
// Default task(s)
grunt.registerTask('default', 'std');
};
What you are getting is the expected compass behavior.
Reading a bit through the grunt-contrib-compass's readme, I see:
Compass operates on a folder level. Because of this you don't specify any src/dest, but instead define the sassDir and cssDir options.
That means that you cannot change the path to where your CSS gets compiled to, only determine the path of the root folder to which all compiled files are written to.
While it can be annoying, compass is simply assuming that keeping the compilation true to the directory structure is supposed to be something you would rather do - which is somewhat opinionated.
You could still do what you want, by:
Restructuring your files so that they are where compass would expect them to be to comply to your intention. Namely dropping the part1 directory and placing part1.sass under the sass folder.
Compiling your CSS files to a temporary folder like tmp, using another task like copy (grunt-contrib-copy) to copy all CSS files to the css folder and then use a task like clean (grunt-contrib-clean) to empty the tmp file. You would load the tasks in that order, so they run in the right sequence.
I am trying to configure jekyll with grunt.js.
Here is my directory structure:
.
.._layouts
.._includes
..other
Here is my code for the gruntfile:
jekyll: {
dev: {
src: '',
dest: ['_layouts', '_includes']
},
},
This dumps the entire site in one folder named _layouts,_includes
I want to to source .html files from both the _includes and _layouts folders. I know the easy way to do this is to put them in "templates" and then have jekyll watch that, but I was wondering if I can keep to this alternative structure somehow?
I'm not entirely positive this will work as the dest only accepts a string. You might consider using 2 sub tasks that put the site in both _layouts and _includes directories