SharePoint KnockoutJS Blank Templates with Gulp watch for changes

Today I uploaded some custom SharePoint Blank Templates on my GitHub repository.

These templates show you, how you can prepare client-side Web Part for SharePoint 2013 and 2016 with Knockout object model attached to HTML template page. I used TypeScript too.

All script files and HTML templates are immediate upload to SharePoint Server when they changed. No solution deployment needed. Just first time, when you create SharePoint solution with blank WebPart inside of the Feature. This enables you to develop faster and simplier.

On GitHub repository I uploaded three templates:

  • SP2013-WP-Knockout – SharePoint 2013 Blank Web Part Template with Knockout model and HTML Template Page
  • SP2016-WP-Knockout – SharePoint 2016 Blank Web Part Template with Knockout model and HTML Template Page
  • SPAddIn-WP-Knockout – SharePoint Add-In Custom Web Page with Knockout model and HTML Template Page

For all three templates you need Node.js installed on your DEV machine.
When you installed it, open CMD as Administrator and write down next command (you need it to install Gulp task runner globally):

npm install -g gulp

Then go with CMD to folder where you downloaded one of these templates and run next command:

npm install

This installs next dependent modules into your project:

 "@types/jquery": "^3.2.10",
 "@types/knockout": "^3.4.43",
 "@types/sharepoint": "^2013.1.9",
 "babel-core": "^6.25.0",
 "babel-polyfill": "^6.23.0",
 "babel-preset-es2015": "^6.24.1",
 "babel-preset-stage-0": "^6.24.1",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-concat": "^2.6.1",
 "gulp-load-plugins": "^1.5.0",
 "gulp-plumber": "^1.1.0",
 "gulp-sourcemaps": "^2.6.0",
 "gulp-typescript": "^3.2.1",
 "gulp-uglify": "^3.0.0",
 "typescript": "^2.4.2"

Open solution in Visual Studio and deploy it to your SharePoint server.

When it is deployed, you could run next command and modify any of TypeScript (TS) files.

gulp

TypeScript files are in client/app subfolder in project.

All changes are immediate uploaded via default Gulp task to your SharePoint HIVE without any long-running deployment process. This task call two subtasks named min-js and transpile. Min-js task is for concatenating and uglifying JS libs and plugins to one file named libs.min.jsTranspile task is for transpiling TypeScript files, using babel and uglifying it to JavaScript.

gulp.task("default", ["min-js", "transpile"], function () {
    gulp.watch(config.tsFiles, ["transpile"]).on("change", reportChange);
    gulp.watch(config.js, ["min-js"]).on("change", reportChange);
});

gulp.task("min-js", function () {
    return gulp.src([config.libs, config.plugins])
        .pipe($.plumber())
        .pipe($.concat(config.destjs))
        .pipe($.uglify())
        .pipe(gulp.dest("."))
        .pipe(gulp.dest("C:\\Program Files\\Common Files\\microsoft shared\\Web Server Extensions\\16\\TEMPLATE\\"))
});

gulp.task("transpile", function () {
    return gulp
        .src(config.tsFiles)
        .pipe($.plumber())
        .pipe($.sourcemaps.init())
        .pipe($.typescript(tsconfig.compilerOptions))
        .pipe($.babel())
        .pipe($.uglify())
        .pipe($.sourcemaps.write("."))
        .pipe(gulp.dest(config.transpiledFiles))
        .pipe(gulp.dest("C:\\Program Files\\Common Files\\microsoft shared\\Web Server Extensions\\16\\TEMPLATE\\LAYOUTS\\" + config.hiveName + "\\script\\"));
});

In gulp.config.js file we have configuration stuff like HIVE name, path to TS files, destination paths etc.

module.exports = function () {
    var hiveName = "SP2016-WP-Knockout"
    var webroot = "./Layouts/" + hiveName + "/";
    var client = "./client/";
    var config = {
        hiveName: hiveName,
        libs: client + "libs/*.js",
        plugins: client + "plugins/*.js",
        destjs: webroot + "script/libs.min.js",
        css: client + "style/**/*.css",
        minCss: client + "style/**/*.min.css",
        concatCssDest: webroot + "style/",
        tsFiles: [
            client + "app/**/*.ts"
        ],
        templates: [
            client + "templates/*.html"
        ],
        transpiledFiles: webroot + "script/",
        templatesDest: webroot + "templates/",
        destPath: webroot + "script"
    };
    return config;
}

When you want to change some of HTML templates, you have to run next command and changes will be visible on your SharePoint page immediately:

gulp copy-templates

These task just copy your HTML template files to correct location in project and HIVE.

gulp.task("copy-templates", function(){
    return gulp
        .src(config.templates)
        .pipe(gulp.dest(config.templatesDest))
        .pipe(gulp.dest("C:\\Program Files\\Common Files\\microsoft shared\\Web Server Extensions\\16\\TEMPLATE\\LAYOUTS\\" + config.hiveName + "\\templates\\"));
});

If you look at SPAddIn-WP-Knockout you could see that in additional I use gulp-spsave for saving/uploading script and html file changes to SharePoint Online.

gulp.task("min-js", function () {
    return gulp.src([config.libs, config.plugins])
        .pipe($.plumber())
        .pipe($.concat(config.destjs))
        .pipe($.uglify())
        .pipe(gulp.dest("."))
        .pipe(spsave({
            siteUrl: _spSite,
            folder: "Scripts"
        },creds))
});

For uploading you must have URL to your SharePoint Add-In page in gulpfile.js file and username & password in spsavecreds.js file.

[ Templates on GitHub ]

Cheers!
Gašper Rupnik

{End.}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: