I want use uglify to minify js file, and want use concat to concat the several js file,
So, I have to create a temporary folder to store the fisrt step minify file ?
and then I concat the minified file together?
Is it possible do this without temp folder, do the two job at the same time? or using the computer memory?
I would start by reading the docs of those tasks. The first example in the uglify task docs shows how you can concat files and then uglify:
grunt.initConfig({
uglify: {
target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/input2.js']
}
}
}
});
Related
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.
Is it possible to chain Grunt tasks so the output of one task is fed into another task without being written to the disk first? For example, could I compile Stylus files into CSS, prefix them with Autoprefixer and then compress them using grunt-contrib-cssmin without writing intermediate files to the disk? I ask because it's a pain to store and reference files between my source and build directories.
I don't believe there is, but I have another way for you. Store the path in a configuration object in your initConfig. By using grunt's built in underscore templates you can have the file path defined once (so it's easier to manage).
module.exports = function(grunt){
grunt.initConfig({
pathTo: {
css: 'dist/css/master.css'
},
cssmin: {
dist: {
files: {
'<%= pathTo.css %>': ['<%= pathTo.css %>']
}
}
},
clean: {
dist: ['dist']
}
});
}
I also recommend using grunt-contrib-clean to erase your dist folder before it is built. This way all of the files that end up in there have been generated by Grunt, so if you change your mind about a file path or item in there you don't have to manually clean it up. Hope this helps. :-)
I used yeoman to scaffold an angular app like so:
yo angular --minsafe
Now, I'm trying to set up jade > html compilation using grunt-contrib-jade but I don't understand the huge Gruntfile.js generated for me.
There is a mountFolder function:
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
...and a yeoman config object:
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
when running grunt server chrome opens up and I get served my page. But where is this magic 'dist' folder that's been served? I can't find it on disk...
The dist folder is only created when you run the build grunt task. While you run grunt server, you get the combined contents of app/ and the .tmp/ folder served to you, whereby .tmp contains temporary build artifacts like compiled SASS stylesheets, compiled CoffeeScript files and it would be the place you want to keep your compiled jade output.
So in my project my javascript comprises of
Third party libraries (jquery, bootstrap, jquery plugins etc)
Custom libraries
Code embedded inline in the html in view files between <script>$(function(){});</script>
Pretty standard stuff.
My goal was to find a reliable, automated way, to minify all my separate javascript files (approx 25 files) into one file for production.
I've installed bower and it seems like a good way to keep my external libraries up to date. I've also installed grunt. I'm using a bower plugin in grunt that copies all downloaded files to a specified directory, then concat can look in that directory to combine them and finally uglifyJS minifies the file. Again, it seems like a standard setup of grunt.
The bower plugin will create a folder like
vendorjs
- bootstrap.js
- jquery.js
- etc
concat will then read from this dir, and as the files are in alphabetical order will combine them in an incorrect order, bootstrap before jquery, so it wont be of use.
I'm aware of RequireJS, but it seems like overkill for my needs. And it also seems like I'd need to rewrite all of my js to comply with the requirements of RequireJS.
Is there some configuration I'm missing that will help with my problem? Am I going about this in the wrong way?
Edit this is my Gruntfile.js for more clarity.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
bower: {
dev: {
dest: 'vendorjs',
options: {
stripJsAffix: true
}
}
}
concat: {
options: {
separator: ';'
},
dist: {
src: ['vendorjs/*.js'],
dest: 'vendor.js'
}
},
uglify: {
dist: {
files: {
'../../public/js/admin/vendor.min.js': ['vendor.js']
}
}
}
});
};
I'm not sure what your config looks like, but you can easily specify the order of files in grunt-contrib-concat:
grunt.initConfig({
concat: {
dist: {
src: ['src/jquery.js', 'src/bootstrap.js'],
dest: 'dist/built.js'
}
}
});