https://github.com/gulpjs/gulp/tree/master/docs
Gulp effectively does things like copy files from one location to another automatically, it can also perform transforms and do other neat stuff.
In their words:
“gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.”
One great usage for it in building SharePoint web parts is automatically copying the JS/CSS files and perhaps HTML templates from your local DEV box up to your SharePoint servers Style Library automatically. You can also do things like CSS to LESS transformations automatically.
This post also covers working behind a corporate proxy server! You’ll need some knowledge of JavaScript and node.js to make this all work for your situation.
Installation
Basically, you want to map your SharePoint servers site collection “Style Library” (the out of the box location for custom CSS/JS etc.) to a local network drive in this example P:\. You can do this in both SharePoint on-prem and SharePoint Online (you need the SPO PowerShell cmdlets installed).
This guide assumes you have NPM node.js setup and working.
Proxy Setup
To install GULP behind a proxy server run this from a nodejs CMD prompt:
npm config set https-proxy https://yourproxy.com.au:PORT
npm config set proxy https://yourproxy.com.au:PORT
npm install --global gulp
Basic setup on Windows
Example gulp configuration file ready to go:
Extract the contents of the attached zip file into your projects modules folder C:\repo\projectname\Modules
Open developer command prompt or nodejs command prompt:
Cd C:\repo\projectname\Modules
Gulp
The logic of what gulp does is in my particular gulpfile.js, this is the part you need to customise to your needs:
- Less to CSS transformation
- Automatic file copy
var dest = require('gulp-dest');
var gulp = require('gulp');
var watch = require('gulp-watch');
var less = require('gulp-less');
var path = require('path');
var stylelibrarypath = "P:\\Style Library\\thepulseAssets";
var sourcepath = "DesignAssets/thepulseAssets";
gulp.task('watchless', function() {
gulp.src(sourcepath + '/css/less/*.less')
.pipe(watch(sourcepath + '/css/less/*.less'))
.pipe(less())
.pipe(gulp.dest(sourcepath + "/css"));
});
gulp.task('watchcss', function() {
gulp.src(sourcepath + '/**/*.css')
.pipe(watch(sourcepath + '/**/*.css'))
.pipe(gulp.dest(stylelibrarypath));
});
gulp.task('watchjs', function() {
gulp.src(sourcepath + '/**/*.js')
.pipe(watch(sourcepath + '/**/*.js'))
.pipe(gulp.dest(stylelibrarypath));
});
gulp.task('default', function() {
gulp.start('watchless');
gulp.start('watchcss');
gulp.start('watchjs');
});
Bonus, you can add a new task to also copy HTML templates in the gulpfile.js
gulp.task('watchhtml', function() {
gulp.src(sourcepath + '/**/*.html')
.pipe(watch(sourcepath + '/**/*.html'))
.pipe(gulp.dest(stylelibrarypath));
});
Then further down
gulp.start('watchhtml');
Also if your gulp crashes with out of memory exceptions you can try this:
Modify your gulp.cmd file in C:\Users<user>\AppData\Roaming\npm by adding –max_old_space_size. I set mine to 8096.
@if EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" --max_old_space_size=8048 "%~dp0\node_modules\ionic\bin\ionic" %*
) ELSE (
@SETLOCAL
@set PATHEXT=%PATHEXT:;.JS;=;%
node --max_old_space_size=8048 "%~dp0\node_modules\ionic\bin\ionic" %*
)
That about wraps up using gulp, there is a lot to learn and experiment with. My example hopefully sets you on the right path for your particular needs.
