I have the dependencies of the application in bower_components, some of the dependencies don't have a minified version so I'd like to create a task creates a minified copy of the file version in the same place where the file is located like:
bower_components
lib1
lib1.js
lib1.min.js <- create this file if doesn't exist
lib2
lib2.js
lib2.min.js <- create this file in it's own lib2 folder
lib3
lib3.js
lib3.min.js <- and so on...
This is my grunt Config so far:
uglify: {
dev: {
files:[
{
expand: true,
src: 'bower_components/modernizr/modernizr.js',
dest: '/',
ext:'.min.js'
}, {
expand: true,
src: 'bower_components/angular-facebook/lin/angular-facebook.js',
dest: '/',
ext: '.min.js'
}]
},
main: {
src: 'temp/app.min.js',
dest:'dist/app.min.js'
}
}
the Grunt task says that copied modernizr to it's own folder but when I look at it, the file is not there and after the first file Grunt passes to the next task and ignores the 'second' file in the array.
I was just testing this obviously I'd like to implement a way that grunt scan all the dependencies in bower_components automatically.
btw, I don't mind to change the task to any other library.
the / in your dest-option means the root path (were your gruntfile resides). just delete the dest-option or put an empty string there.
important: this just works with the expand-option set!
{
expand: true,
src: 'bower_components/modernizr/modernizr.js',
ext:'.min.js'
}
Edit:
for scanning all folders an minimizing all js files do it like this (note the second argument in src to not minify files which are already minified):
{
expand: true,
src: ['bower_components/**/*.js', '!bower_components/**/*.min.js'],
ext:'.min.js'
}
Related
I have a file structure like this:
/server/
- package.json
- node_modules/
- Gruntfile.js
/public/
- index.html
- assets/
When in /server I run npm install, which downloads things like Angular into /server/node_modules.
I then run the Gruntfile.js which looks like this:
require('load-grunt-tasks')(grunt);
grunt.initConfig({
//concat js
concat: {
options: {
separator: ';',
sourceMap: true
},
lib: {
src: [
'./node_modules/angular/angular.js',
'./node_modules/angular-route/angular-route.js',
'./node_modules/angular-animate/angular-animate.js'
],
dest: '../public/assets/build/lib/lib.min.js'
}
},
//minify js
uglify: {
options: {
mange: true,
compress: true,
sourceMap: true
},
lib: {
src: '<%= concat.lib.dest %>',
dest: '<%= concat.lib.dest %>'
}
}
});
grunt.registerTask('build', ['concat', 'uglify']);
The grunt file works as expected to concat and minify the Angular modules with a source map. The problem is that the domain name points to the public directory, but the source map wants to point to the Angular source code in the server directory, which I don't think will work.
How do I get around this problem? Do I have to have the node_modules in the root of the public directory? I'd rather not have any precompiled code in the public directory if possible, the reason being that when I put the site live, I can simply FTP the public directory and ignore the server, reducing unnecessary bulk.
I've tried a few things but can't come to a good solution.
I'm using grunt to compile my sass and minify my javascript.
Is it possible to autoload every .sass file and every .js file in a specific directory?
I've tried stuff like this
sass: {
options: {
sourceMap: false
},
dist: {
src: 'src/sass/**/*.sass',
dest: 'dist/css/style.css'
}
}
but this will only load the very first sass file.
I'm not sure what concat even does but I tried it aswell and didn't find the solution I was looking for.
Basicly all files in the folder sass/ should be compiled to 1 big style.css file the same with javascript.
Sure I could manually import each file in a main.sass file or so, but I would love a autoload function so I don't get lazy and don't create new files because I would have to add them.
edit:
So with this
files: [{
expand: true,
cwd: "src/sass/",
src: ["**/*.sass"],
dest: "dest/css",
ext: ".css"
}]
I can actually do what I want. The problem is my mixins get loaded too late and it's thorwing an error because it doesn't find the mixin I wanted to include.
This is a format to generate a single output file from multiple source files:
concat: {
whatever: {
options: { separator: '\n' },
src: ['src/sass/**/*.sass'],
dest: 'build/tmp.sass' // make sure the temporary build/ dir exists!
}
}
It only works on tasks supporting combining multiple files; in this case the grunt-contrib-concat task.
It produces dist/css/sass.tmp, which you will need to process with the sass task:
sass: {
dist: {
files: [{
src: 'build/tmp.sass',
dest: 'dist/css/style.css'
}]
}
}
You would make sure they are run in sequence with something like this:
grunt.registerTask( 'default', ['concat', 'sass'] ); // add your uglify/cssmin here
However, I don't recommend this, because the order of the sass files is uncontrollable, and it won't make mixin's available, even if they are compiled to css first - which is pointless, because they loose their 'mixin' format. It's best to run sass on a single source file and import your other files in that source file.
Update
Regarding auto-loading of mixin files,
the SASS Reference does mention you can use custom importers (written in Ruby) that take care of #import; I'm not sure whether this is only for top-level importing of files, or also for #import mixin-name(foo) within rules, but I don't think so.
There is an alternative approach you could use, based on concat, assuming that you have one main sass file. You would need to add a single #import 'all-mixins' to it. This all-mixins.sass is a generated file:
concat: {
all_mixins: {
options: { separator: '\n' },
src: ['src/sass/mixins/*.sass'],
dest: 'build/all-mixins.sass'
}
}
And you would specify the sass option loadPath to add build/ to the path:
sass: {
dist: {
options: {
loadPath: 'build/'
},
files: [{
src: 'build/tmp.sass',
dest: 'dist/css/style.css'
}]
}
}
This is as close to auto-loading as it gets without extending sass itself.
So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out.
Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder:
This is how it looks:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
watch:{
sass:{
files:['sass/*.scss'],
task:['sass']
}
},
sass: {
dist: {
files: [{
expand: true,
cwd: '',
src: ['sass/*.scss'],
dest: 'css/',
ext: '.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
And this is how my folder looks after I run the task:
/SASS/somefile.scss
/CSS/SASS/somefile.css
The SASS folder it should not be there, the result i expect is:
/SASS/somefile.scss
/CSS/somefile.css
Thanks in advance!
The problem is due to your parameters for building the files object dynamically. You need to set the cwd parameter: "All src matches are relative to (but don't include) this path."
files: [{
expand: true,
cwd: 'sass/',
src: '*.scss',
dest: 'css/',
ext: '.css'
}]
Create a SASS folder under your CSS folder. Your somefile.scss file move into SASS folder then run.
like as :
CSS/
SASS/somefile.scss
Hello I have a file structure that looks like this,
|-App
|------|src
|----------|js
|----------|img
|----------|css
|----------|less
|----------|tpl
|----------|index.php
|- Gruntfile.js (withing parent app folder)
|- package.json (withing parent app folder)
What I am trying to do is move all the contents of the src folder into a build folder, the build folder gets created but outside of the App folder, and I don't really understand why, secondly when it does copy the src folder it copies the actual src folder, I want to copy all its children but no the parent src folder, and thirdly the copy ignores the index.php file why? Below is my current Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
copy: {
build: {
cwd: '.',
src: ['src/*/*'],
dest: '../build',
expand: true
}
},
clean: {
build: {
cwd: '.',
src: ['build']
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('move', 'Moves the project to the build folder', ['copy', 'clean']);
};
Your paths are wrong. Change the build options to:
build: {
cwd: '.',
src: ['src/**/*'],
dest: './build',
expand: true
}
../build meant the build directory was created in the parent dir (.. is the parent dir)
src/**/* means recursively copy all files and files of descendent folders.
Using Grunt, I want to concat one file to all of the files in a build directory. The purpose of doing so is to append (or potentially prepend) IE specific CSS files to a build CSS file.
To task this:
build/
file1.css
file2.css
file3.css
And create this:
build/
file1.css
file1.ie.css
file2.css
file2.ie.css
file3.css
file3.ie.css
I thought that the expand option might be what I was looking for but I can't figure out how to get it to do what I want.
Try the banner option in grunt-contrib-concat:
concat: {
dist: {
options: {
banner: '/* IE specific things here */',
},
expand: true,
cwd: 'build/',
ext: '.ie.css',
src: ['**/*.css'],
dest: 'build/',
},
},