
Product
Introducing Tier 1 Reachability: Precision CVE Triage for Enterprise Teams
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
boar-tasks-client
Advanced tools
This repository contains Gulp-based tasks to make client-side applications easier. It can be used with any client side framework which supports the CommonJS or AMD pattern.
These tasks are helpers, you have to define your build tasks in your project's gulpfile.js
. You can find examples in our existing services or workshop material.
Usually we create a tasks.config.js
file which is for override the default task settings.
// tasks.config.js
module.exports = {
staticServer: {
port: 8081
},
client: {
app: {
buildPattern: 'client/app/app.js',
testPattern: 'client/app/**/*.spec.js'
},
stylesheets: {
buildPattern: 'client/stylesheets/app.styl'
}
}
};
// gulpfile.js
let gulp = require('gulp');
let runSequence = require('run-sequence');
let config = require('./tasks.config.js');
let tasks = require('boar-tasks-client').getTasks(gulp, config);
gulp.task('build', function(cb) {
runSequence('build-clean', 'client-build', cb);
});
gulp.task('start', ['build'], function() {
gulp.run('server');
gulp.run('assets-watch');
gulp.run('client-watch');
});
gulp.task('test', tasks.client.test);
gulp.task('code-style', ['client-jscs', 'check-tests', 'check-logs']);
gulp.task('build-clean', tasks.build.clean);
gulp.task('server', tasks.client.staticServer);
gulp.task('client-build', tasks.client.buildScripts);
gulp.task('client-watch', tasks.client.buildScriptsDenyErrors);
gulp.task('reload-static-server', tasks.client.reloadStaticServer);
gulp.task('assets-watch', function() {
gulp.watch('dist/**/*', ['reload-static-server']);
});
It is used to remove files from the build target directory.
Pushes the current codebase to the production branch. Usually it initiate a deploying process.
Saves the given revision to the Emarsys Redirector service - allowing to control user caches above Amazon S3 and Cloudfront.
Default configuration
Config.redirector = {
url: argv.redirectorUrl || process.env.REDIRECTOR_URL,
name: argv.redirectorName || process.env.REDIRECTOR_NAME,
target: argv.redirectorTarget || process.env.REDIRECTOR_TARGET,
apiSecret: argv.redirectorApiSecret || process.env.REDIRECTOR_API_SECRET
};
Usage
gulp.task('publish-redirector', tasks.redirector.save);
// Revision can be calculated before the task run
gulp.task('publish-redirector', function() { return tasks.redirector.save('myLatestRevision'); });
It gzip the current codebase and pushes to Amazon S3
Default configuration
Config.s3 = {
copyPattern: 'dist/**/*',
bucket: argv.s3Bucket || process.env.S3_BUCKET,
withGzip: true,
headers: {
'Cache-Control': 'max-age=315360000, no-transform, public',
'x-amz-acl': 'bucket-owner-full-control'
}
};
Usage
gulp.task('publish-s3', tasks.s3.publish);
Copy static files into the dist
folder.
Default configuration
Config.client = {
static: {
copyPattern: 'client/static/**/*',
target: Config.build.assetsPath
}
}
Usage
gulp.task('client-build-static', tasks.client.copyStatic);
Copying and pre-processing stylesheets using stylus.
Default configuration
Config.client = {
stylesheets: {
buildPattern: 'client/stylesheets/*.styl',
watchPattern: 'client/stylesheets/**/*',
target: Config.build.assetsPath + 'stylesheets/',
plugins: [],
includeCSS: true,
autoprefixer: {
browsers: ['ie 9', 'ie 10', 'last 2 versions'],
cascade: false
}
}
}
Usage
gulp.task('client-build-stylesheets', tasks.client.buildStylesheets);
It is the same as the buildStylesheets
task but it is not exiting on stylesheet error. It is suggested to use for smooth development experience.
Usage
gulp.task('client-build-stylesheets-continously', tasks.client.buildStylesheetsDenyErrors);
It is used to build JavaScript files. It uses Webpack and Babel to compile ES6 code to ES5. Finally it creates a single JavaScript file with all of required files.
Default configuration
Config.client = {
app: {
path: 'client/app/',
extensions: ['.js'],
buildPattern: 'client/app/!(*.spec).js',
testPattern: 'client/app/**/*.spec.js',
testModules: [],
watchPattern: 'client/app/**/*',
viewPattern: 'client/app/views/**/*.jade',
vendorPattern: 'client/vendors.js',
target: Config.build.assetsPath + 'scripts/',
vendors: [],
codeStylePattern: 'client/app/**/*.js',
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /(node_modules)/ },
{ test: /\.jade$/, loader: 'jade-loader?self' },
{ test: /\.json$/, loader: 'json-loader' }
]
}
}
Usage
gulp.task('client-build-scripts', tasks.client.buildScripts);
It is the same as the buildScripts
task but it is not exiting on script compilation error. It is suggested to use for smooth development experience.
Usage
gulp.task('client-build-scripts-continously', tasks.client.buildScriptsDenyErrors);
It concatenates all of the listed vendor files and create a vendors.js
on the client.app.target
path from the configuration.
Default configuration
Config.client = {
app: {
target: Config.build.assetsPath + 'scripts/',
}
vendors: []
}
Usage
gulp.task('client-concat-vendors', tasks.client.concatVendors);
If you have an app with multiple entry points, you can configure buildPattern
as an array of strings.
Config.client = {
app: {
buildPattern: [
'client/app/!(*.spec).js',
'other/dir/!(*.spec).js'
]
}
};
If you have entry points used somewhere else where vendors.js
is not available - eg. a web worker -, you can configure buildPattern
to build those entry points with the webpack module loading logic included.
Config.client = {
app: {
buildPattern: [
'client/app/!(*.spec).js',
{
pattern: 'client/workers/!(*.spec).js',
splitVendor: false
}
]
}
};
Run all the tests found in the codebase using Karma.
Default configuration
Config.client = {
testConfigPath: process.cwd() + '/karma.conf.js'
}
Usage
gulp.task('client-test', tasks.client.test);
Check code style using ESLint on the selected JavaScript files.
Default configuration
Config.client = {
app: {
codeStylePattern: 'client/app/**/*.js'
}
}
Usage
gulp.task('client-codestyle', tasks.client.codeStyle);
Check code style on the selected stylesheets using Stylint.
Default configuration
Config.client = {
stylesheets: {
codeStyle: {
pattern: 'client/stylesheets/**/*.styl',
config: {
rules: {
depthLimit: 3,
efficient: false,
indentPref: 2,
namingConvention: 'lowercase-dash',
noImportant: true,
quotePref: 'double',
sortOrder: 'alphabetical',
valid: false
}
}
}
}
}
Usage
gulp.task('client-stylesheet-codestyle', tasks.client.stylesheetCodeStyle);
Check code style on the selected template files using pug-lint.
Default configuration
Config.client = {
app: {
templateCodeStylePattern: 'client/app/**/*.jade'
}
}
Code style rules
Install pug-lint-config-emarsys
to your project and create a file in your project's root called .pug-lintrc
with the following content:
{
"extends": "emarsys"
}
Usage
gulp.task('client-template-code-style', tasks.client.templateCodeStyle);
Check package.json's dependencies section against known vulnerable libraries. This will only generate warnings on the console.
Usage
gulp.task('nsp', function(cb) { tasks.client.nsp(__dirname + '/package.json', cb) });
It is for development purposes - serving static asset files.
Default configuration
Config.staticServer = {
port: process.env.PORT || 8080
};
Usage
gulp.task('client-static-server', tasks.client.staticServer);
// It can be reloaded with reloadStaticServer
gulp.task('reload-static-server', tasks.client.reloadStaticServer);
FAQs
Boar Tasks for client side
We found that boar-tasks-client demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.
Security News
The MCP Steering Committee has launched the official MCP Registry in preview, a central hub for discovering and publishing MCP servers.