I use grunt to less>css, minification, and concatenation of my CSS and JS. I am wondering if it's possible to pass in a param when you type in "grunt watch" which would be the directory to watch. That way I can have multiple versions of a site running off the same gruntfile.
http://pastebin.com/b2FJ74SC
You can use node's process.argv to get the command line arguments.
The code below can be called with: grunt watch --dir myfolder
grunt.registerTask('watch', function() {
var args = process.argv;
var folder = args[args.indexOf('--dir') + 1];
console.log('watch folder: ', folder); // "watch folder: myfolder"
});
Related
I am working on an application that is developed using ASP.NET MVC 5 framework. I am using Visual Studio 2013 to write my application.
I need to utilize gulp to automate the process of compiling my sass file and publishing them into a bundle.css file.
To do that, here is what I have done
Installed NodeJs on my machine
Installed gulp globally using npm install -g gulp
Created a file called gulpfile.js in the root project of the project
created the package.json file using npm init command
Added gulp to my development dependencies by executing the following command from the root of my project npm install gulp --save-dev
Added the code below to my gulpfile.js
From the command console I fired gulp command which displayed the following info
Using gulpfile ...gulpfile.js
Starting 'watch'...
Finished 'watch' after 21 ms
Starting 'default'...
Finished 'default' after 31 µs
But when I write code into my ~/Assets/Sass/**/*.sass nothing gets saved into ~/Public/Css/bundle.css as expected
Here is what gulpfile.js looks like
const gulp = require('gulp'),
sass = require('gulp-ruby-sass');
// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);
// listener task
gulp.task('watch', function(){
//Watch any change in the sass directory and trigger the "compileSass" for every save
gulp.watch('~/Assets/Sass/**/*.sass', ['compileSass']);
});
// Task to compile the sass files
gulp.task('compileSass', () =>
sass('~/Assets/Sass/**/*.sass')
.on('error', sass.logError)
.pipe(gulp.dest('~/Public/Css/bundle.css'))
);
What am I missing here? How can I get the watched to watch and fire the tasks after each save?
Updated
I switch from using gulp-ruby-sass plugin into using gulp-scss. Now, I got the task to run every time I save a scss file but for some reason it wont update the destination file.
Here is how my gulpfile.js file looks like
const gulp = require('gulp'),
scss = require('gulp-scss');
// Default task which will be be fired when the runner is started
gulp.task('default', ['watch']);
// listener task
gulp.task('watch', function(){
//Watch any change in the "Sass" directory and trigger the "compileScss" for every save
gulp.watch('./Assets/Scss/**/*.scss', ['compileScss']);
});
// Task to compile the "Scss" files
gulp.task('compileScss', function () {
gulp.src('./Assets/Scss/**/*.scss')
.pipe(scss({ "bundleExec": true }))
.pipe(gulp.dest('./Public/Css/bundle.css'));
});
You may be missing the require for gulp-watch:
var watch = require('gulp-watch');
From gulp-watch:
watch(glob, [options, callback]) Creates a watcher that will spy on
files that are matched by glob which can be a glob string or array of
glob strings.
Returns a pass through stream that will emit vinyl files (with
additional event property) that corresponds to event on file-system.
You have to provide a function. Meaning that a task name is not sufficient.
Try using gulp-batch to run some tasks withing your watch:
npm install gulp-batch --save-dev
Your watch task:
// listener task
gulp.task('watch', function(){
var watch = require('gulp-watch');
var batch = require('gulp-batch');
//Watch any change in the sass directory and trigger the "compileSass" for every save
watch('~/Assets/Sass/**/*.sass', batch(function (events, done) {
// run your compileSass task
gulp.start('compileSass', done);
}));
});
Edit:
You can run tasks from Visual Studio 2015 in the "Task Runner Explorer" window.
However, if you have a prompt running gulp-watch it should have the same effect and run your compile task when it detect changes to the files that you are watching regardless of where they were edited.
Basic things to check are folder location existence, file names, and read/write permissions.
Example gulpfile.js that uses gulp.watch and gulp-load-plugins in a Zurb Foundation 6 project using (foundation-cli).
Note that .pipe(gulp.dest('../your/path/css'));
does not include a ~ or specify a file name or extension. It only specifies a path. The file placed in that path is given the default name of style.css since the source files name is style.scss. See line gulp.src('scss/style.scss').
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
// Multiple locations of SCSS to combine
var sassPaths = [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/style.scss') // SCSS Source file
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'compressed' // if css compressed **file size**
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('../your/path/css')); // OUTPUT Destination
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']); // FILES to Watch
});
I'm toying around with ASP.NET 5 and am using gulp. I added angularjs and angular-route to my package.json file which stored the files at Dependencies->NPM. I added this to my gulpfile.js thinking that it would copy over the the correct JS files. It did copy over the files, however, it also crashed the project. I had to manually go into the lib folder and remove everything that gulp added. What's the proper way to copy files from the NPM folder a destination folder. I'd like to be able to just run the task from Task Runner.
I'm assuming this is incorrect: (which is what I ran)
gulp.task("copyJs", function () {
return gulp.src('./node_modules/**/*.js')
.pipe(gulp.dest('./wwwroot/lib/'))
});
*I think the trailing '/' in gulp.dest('./wwwroot/lib/') might be the cause of the problem, try gulp.dest('./wwwroot/lib') instead.
This is the gulp workflow I use for Angular 2 with Asp.Net 5.
var gulp = require("gulp"),
merge = require("merge-stream"),
rimraf = require("rimraf");
var paths = {
webroot: "./wwwroot/",
node_modules: "./node_modules/"
};
paths.libDest = paths.webroot + "lib/";
gulp.task("clean:libs", function (cb) {
rimraf(paths.libDest, cb);
});
gulp.task("copy:libs", ["clean:libs"], function () {
var angular2 = gulp.src(paths.node_modules + "angular2/bundles/**/*.js")
.pipe(gulp.dest(paths.libDest + "angular2"));
var es6_shim = gulp.src([
paths.node_modules + "es6-shim/*.js",
"!**/Gruntfile.js"])
.pipe(gulp.dest(paths.libDest + "es6-shim"));
var systemjs = gulp.src(paths.node_modules + "systemjs/dist/*.js")
.pipe(gulp.dest(paths.libDest + "systemjs"));
var rxjs = gulp.src(paths.node_modules + "rxjs/bundles/**/*.js")
.pipe(gulp.dest(paths.libDest + "rxjs"));
return merge(angular2, es6_shim, systemjs, rxjs);
});
There are many ways to do it but one of the good simple ways I found was this: http://www.hanselman.com/blog/ControlHowYourBowerPackagesAreInstalledWithAGulpfileInASPNET5.aspx
Which do an update to the bowerrc file and everything after this update makes more sense.
UPDATE YOUR .BOWERRC AND PROJECT.JSON
In the root of your project is a .bowerrc file. It looks like this:
> { "directory": "wwwroot/lib" } Change it to something like this, and
> delete your actual wwwroot/lib folder.
>
> { "directory": "bower_components" } EXCLUDE YOUR SOURCE BOWER FOLDER
> FROM YOUR PROJECT.JSON
You'll also want to go into your project.json file for ASP.NET 5 and
make sure that your source bower_components folder is excluded from
the project and any packing and publishing process.
> "exclude": [
> "wwwroot",
> "node_modules",
> "bower_components" ],
UPDATE YOUR GULPFILE.JS
In your gulpfile, make sure that path is present in paths. There are
totally other ways to do this, including having gulp install bower and
figure out the path. It's up to you how sophisticated you want your
gulpfile to get as long as the result is that production ready .js
ends up in your wwwroot ready to be served to the customer. Also
include a lib or destination for where your resulting JavaScript gets
copied. Could be scripts, could be js, could be lib as in my case.
var paths = {
webroot: "./" + project.webroot + "/",
bower: "./bower_components/",
lib: "./" + project.webroot + "/lib/" }; ADD A COPY TASK TO YOUR GULPFILE
Now open your Gulpfile and note all the tasks. You're going to add a
copy task to copy in just the files you want for deployment with your
web app.
Here is an example copy task:
> gulp.task("copy", ["clean"], function () {
> var bower = {
> "bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
> "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
> "hammer.js": "hammer.js/hammer*.{js,map}",
> "jquery": "jquery/jquery*.{js,map}",
> "jquery-validation": "jquery-validation/jquery.validate.js",
> "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
> }
>
> for (var destinationDir in bower) {
> gulp.src(paths.bower + bower[destinationDir])
> .pipe(gulp.dest(paths.lib + destinationDir));
> } });
Do note this is a very simple and very explicit copy tasks. Others
might just copy more or less, or even use a globbing wildcard.
It's up to you. The point is, if you don't like a behavior in ASP.NET
5 or in the general build flow of your web application you have more
power than ever before.
Right click the Bower node in the Solution Explorer and "Restore
Packages." You can also do this in the command line or just let it
happen at build time.
Looking in this simplified screenshot, you can see the bower
dependencies that come down into the ~/bower_components folder. Just
the parts I want are moved into the ~/wwwroot/lib/** folder when the
gulpfile runs the copy task.
I manage very complex monorepos, I don't like hardcoded file paths and prefer to mirror my source code for transparency. I explored a LOT of solutions for doing a lot of files at once and find them all opaque and bloated. I recommend a factory that ultimately does this with source-like file module references:
gulp.parallel(
() =>
gulp
.src(require.resolve('#bootstrap/core/dist/bootstrap.all.min.js'))
.pipe(gulp.dest(DIST)),
() =>
gulp
.src(require.resolve('foobar/dist/foobar.all.min.js'))
.pipe(gulp.dest(DIST))
You can make them named functions for visibility as well.
My project uses Bower to install deps and Grunt to build. My project tree looks like this
|
|-bower_components
| |
| |-jquery
| |-semantic
| |-...
|-Bower.json
|-Gruntfile.js
|-public
| |
| |-css // Compiled, concatenated and minified semantic-ui
| |-js // and other libs should be here
|-...
|-etc..
Is it possible to build custom semantic-ui (ie customize fonts, colors, remove unused components) using Grunt (or maybe using Gulp called from Grunt)?
Where to place semantic theme config and overrides files?
It's not difficulty to use grunt to build semantic-ui. I don't know about bower, but this is how I did it.
Install grunt-contrib-less.
Create a new directory somewhere in your project, e.g. '/less/semantic'. Copy 'site' directory from your semantic packagea, i.e. 'bower_components/semantic/src/site' to the new directory. All your overrides will be done here.
Create a config.json file in '/less/semantic' to configure what components you want to be included in your build. The file content will be something like this:
{
"elements": ["button", "divider"],
"collections": ["form"],
"modules": ["checkbox"]
}
Add following to your gruntFile.js file:
var fs = require('fs');
// Defines files property for less task
var getSemanticFiles = function() {
var files = {};
var config = JSON.parse(fs.readFileSync('less/semantic/config.json'));
var srcDir = 'bower_components/semantic/definitions/';
var outputDir = 'less/semantic/output/';
for (var type in config) {
config[type].forEach(function(ele) {
files[outputDir + type + '.' + ele + '.output'] = [srcDir + type + '/' + ele + '.less'];
});
}
return files;
};
Configure less task as following:
less: {
semantic: {
options: { compile: true }
files: getSemanticFiels()
},
dist: {
options: { compile: true }
files: { 'public/css/semantic.css': ['less/semantic/output/*'] }
}
}
Edit theme.config in 'bower_components/semantic/src', change #siteFoler to '../../../less/site/', and make any additional changes as needed per semantic document.
You run grunt less:semantic to compile all needed components, and then run less:dist to put them into a single css file.
Of course you can configure a watch task to automate the process. Then every time you make a change, the css will be automaticly re-built.
I am sure someone will build a grunt build to semantic one day, but for now, I just use this to call all the gulp commands using grunt. https://github.com/sindresorhus/grunt-shell. Just make sure you are calling the gulp build task and not the default gulp task. It has a watch task that will cause grunt to not finish the shell task.
I'd like to be able to run the same builds for different targets by passing in config information from a build file, e.g. grunt build:target1 and grunt build:target2...
I figured I could access the target within the grunt file
module.exports = function ( grunt ) {
var userConfig = require( **'./'+grunt.task.current.name+'build.config.js'** );
var taskConfig...
grunt.initConfig( grunt.util._.extend( userConfig, taskConfig ) );
But the target is only available within a task.
Is there another way of accomplishing something like this?
You can pass command line arguments to Grunt by passing them using two dashes, like
--[your_arg_name]=[arg_value].
Example:
grunt --target=debug
Then retrieve this value in your Grunt config file by calling
module.exports = function (grunt) {
var target = grunt.option('target'),
userConfig = require('./' + target + "build.config.js");
...
}
You can choose whichever name you like, I chose target in my examples above.
I have a project with several sub folders that contain JavaScript files I want to concatenate. what would be the right way to configure them?
eg.
source: /modules/$modulename/js/*.js (several files)
dest: /modules/$modulename/js/compiled.js
So what I want to do is to compile js-files of an unknown/unconfigured count of subfolders ($modulename) into one file per subfolder.
Is this possible?
The following function (built after hereandnow78's instructions) does the job:
grunt.registerTask('preparemodulejs', 'iterates over all module directories and compiles modules js files', function() {
// read all subdirectories from your modules folder
grunt.file.expand('./modules/*').forEach(function(dir){
// get the current concat config
var concat = grunt.config.get('concat') || {};
// set the config for this modulename-directory
concat[dir] = {
src: [dir + '/js/*.js', '!' + dir + '/js/compiled.js'],
dest: dir + '/js/compiled.js'
};
// save the new concat config
grunt.config.set('concat', concat);
});
});
after that i put preparemodulejs before the concat job in my default configuration.
you will probably need to code your own task, where you iterate over your subfolders, and dynamically append to your concat configuration.
grunt.registerTask("your-task-name", "your description", function() {
// read all subdirectories from your modules folder
grunt.file.expand("./modules/*").forEach(function (dir) {
// get the current concat config
var concat = grunt.config.get('concat') || {};
// set the config for this modulename-directory
concat[dir] = {
src: ['/modules/' + dir + '/js/*.js', '!/modules/' + dir + '/js/compiled.js'],
dest: '/modules/' + dir + '/js/compiled.js'
};
// save the new concat configuration
grunt.config.set('concat', concat);
});
// when finished run the concatinations
grunt.task.run('concat');
});
run this with:
$ grunt your-task-name
this code is untested, but i think it should do your job.
HINT: you can put this code into an external file and include in your gruntfile if you want to keep your gruntfile small, e.g. put this into a file inside a tasks-directory:
module.exports = function(grunt) {
grunt.registerTask("your-task-name", "your description", function() {
...
});
};
and load in in your gruntfile:
grunt.loadTasks("./tasks");