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
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 am trying to structure my assets so that multiple projects can share a "phase" of the build script. For example, if I have 3 web-based products that all use Bootstrap and jQuery, I want to only source the libraries from a shared "library".
The folders are proposed to be structured like this:
shared
-sharedGrunt.js (file)
-lib (folder)
-bootstrap (folder)
-jQuery.js (file)
app1
-Gruntfile.js (file)
-src (folder)
-images (folder)
-js (folder)
-etc
app2
-Gruntfile.js (file)
-src (folder)
-images (folder)
-js (folder)
-etc
I want Gruntfile.js in each "app" folder to be able to "import" or otherwise execute sharedGrunt.js. I haven't crossed that bridge yet because I'm stuck at the very first proof of concept test: a simple copy.
So, in one of the app's Gruntfile.js files, I have a copy task that looks like this:
copy: {
externalTest: {
expand: true,
src: '../shared/lib/jQuery.js',
dest: 'dev/js/jQuery.js',
flatten: true
}
}
As you can see, I try to go UP one level from the Gruntfile. Which is the directory containing "shared", "app1", and "app2". And then navigate back down into the shared lib folder in order to grab jQuery.
The task is "successful" (no actual error is thrown), but no files are copied.
How can I accomplish my goal? Will I need to put a "catch-all" gruntFile into a "parent" folder that contains all of the projects? I don't want developers to require checking out the whole parent. I want developers to be able to check out "app1" and "shared" and run with it.
It's weird - Grunt has no problem with going up any level, and on my machine your code indeed copies 1 file.
However, your use of expand cause grunt to use the dest property as a directory, so your file ends up being dev/js/jQuery.js/jQuery.js (note the repetition).
Fixed by doing:
copy: {
externalTest: {
expand: true,
src: '../shared/lib/*.js',
dest: 'dev/js',
flatten: true
}
}
Prompted by observations in Xavier's answer, I forged ahead and determined that I had two flaws:
I should simply provide the destination directory. If I try to provide a filename, it will make an additional directory with the name of what I thought would be the filename; this is per Xavier's observation.
If you don't issue a "cwd" for the copy, it reproduces the entire directory tree from the source side.
So, the following:
share: {
expand: true,
src: '../common/lib/jquery.js',
dest: 'dev/js/'
}
results in a file found in the destination as '"dev/common/lib/jquery.js"'. This is not intended behaviour.
SOLUTION:
Supply the destination as a directory, not a filename. It will use the original filename.
Issue a CWD before the copy so that the source path is not merged into the destination path.
Working task:
share: {
expand: true,
cwd: '../common/lib',
src: 'jquery.js',
dest: 'dev/js/'
}
Results in a file sourced at "../common/lib/jquery.js" and ending up at destination "dev/js/jquery.js" as intended.
I am currently in the process of writing my first Node.js app. I recently installed bootstrap via the npm (following instructions on bootstrap's web site) and was wondering the "standard" way of referencing the bootstap.min.css (and other files of interest). It is best to use grunt/gulp to copy (bundle and minify) the resources I need into my project structure?
Any help would be appreciated.
I was able to copy with the node_modules bootstrap resources with a simple Grunt task:
copy: {
bootstrapSrcCss: {
src: "./node_modules/bootstrap/dist/css/bootstrap.css",
dest: "./public/src/css/bootstrap.css"
},
bootstrapSrcJs: {
src: "./node_modules/bootstrap/dist/js/bootstrap.js",
dest: "./public/src/js/bootstrap.js"
}
}
Using grunt plug-in: grunt-contrib-copy
As explained in This Blog Post, you can create a "Static Route" instead of exposing the node_modules structure totally.
app.use('/scripts', express.static(__dirname + '/node_modules/bootstrap/dist/'));
But that may not be the best method. It seems that packages that come with resources also come with Grunt files as well.
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 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.