npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

xocs

v0.2.2

Published

Simple and lightweight Node.js task runner includes source processor and some utilities, which is useful for Front-end developments or Web productions

Downloads

95

Readme

node version npm version Build Status Codacy Badge License

xocs

[klɔ'ks]


Simple and lightweight Node.js task runner includes source processor (SASS, SCSS, Babel, Imagemin etc.), and some utilities (watcher, BrowserSync, FTP client, etc.),

which makes more easy for you to Front-end developments or Web productions,

aiming to be an alternative of laravelmix, gulp, grunt,... and so on.

Screenshot

Contents

Feature

Get Started

Usage

TypeScript Support

Version

Contributing

License


Feature

Watcher

  • Watching file change to call Processors, browserSync, FTP client, etc.

Processer

  • SASS, SCSS Compile
  • postcss
  • babel
  • Imagemin ( png, jpg, gif, svg, webp)

Utility

  • BrowserSync
  • FTP Client

Task Runner

  • Users can register tasks and can call these with CLI command

Get_Started

1. Run command below to install npm modules

Option 1. Yarn

 $ yarn add -D xocs

Option 2. NPM

 $ npm install -D xocs

2. Automatically generate configuration files to your npm root

[npm root]
|-- .env                 //  Append setting templates includes FTP and BrowserSync to '.env'
|                        //   ( will genereate unless already exists )
|-- .browserslistrc      //  Generate unless '.browserslistrc' already exists
|-- babel.config.js      //  Generate unless 'babel.config.js' already exists
|-- imagemin.config.js   //  Generate unless 'imagemin.config.js' already exists
|-- postcss.config.js    //  Generate unless 'postcss.config.js' already exists
|-- xocs.mix.js          //  Procedure file ( will genereate unless already exists )

Procedure file's name rule is xocs.***.js or xocs.***.ts.
If mutliple procedure files exist, these are prioritized in alphabetical order.

3. Edit procedure file

Edit xocs.mix.js to define source directory root (srcRoot) and build directory root (publicRoot)

const xocs = require('xocs').default;

// Define source directory root (srcRoot) and build directory root (publicRoot)
xocs.init({
  srcRoot: 'src',
  publicRoot: 'public',
});

/** Add some  additional procedures below
 *  (ex.  Start watcher, sass compile, ... etc.)
 *    .
 *    .
 */

See below section for how to write additional procedures.

4. Run CLI

 $ npx xocs

Option: Global Install

If you need run CLI command without npx, install globally in advance

 $ npm install -g xocs
 $ xocs

Usage

Initialize Procedure

const xocs = require('xocs').default;

xocs.init({
  env: 'env.production', // Specify your '.env' file name ( Default is '.env')
  srcRoot: 'src', // Specify your source directory root  ( Default is 'src')
  publicRoot: 'public', // Specify your build directory root ( Default is 'public')
});

Compile SCSS

// Compile scss files specified with 'glob pattern' (!no 'regex pattern')
xocs.sass('src/**/*.scss');

Compile SCSS and PostCss

// Proccess with postcss based on options in 'postcss.config.js'
xocs.sass('src/**/*.scss').postcss();

Transpile JavaScript

// Proccess with babel based on options in 'babel.config.js'
xocs.babel('src/**/*.js');

Image Optimization

// Proccess with postcss based on options in 'postcss.config.js'
xocs.imagemin('src/**/*.@(jpg|jpeg|png|gif|svg|webp)');

Arbitrary shell command execution

xocs.exec('rm -rf .cache');

Watching files and compile CSS

// Proccess with postcss based on options in 'postcss.config.js'
xocs.watch(['src/**/*.sass', 'src/**/*.scss'], ($) => {
  $.sass().postcss();
});

Hear, $ which is a argument of watch property method, has type named Thread.
Thread have same functions of xocs itself except for it includes the information of target files of watcher.

BrowserSync

// Init BrowserSync
const browser = xocs.browser();

// Watch files to trigger css compile and browser reload
xocs.watch(['src/**/*.sass', 'src/**/*.scss'], ($) => {
  $.sass().postcss();
  browser.reload();
});

You can also write as below

// Init BrowserSync
xocs.browser();

// Watch files to trigger css compile and browser reload
xocs.watch('src/**/*.@(sass|scss)', ($) => {
  $.sass().postcss().reload();
});

FTP upload

Edit .env file to path values to process.env
and ignore git staging of .env with .gitignore (recommend)

xocs already includes dotenv module as dependincies

// Create FTP connection
xocs.remote({
  host: process.env.FTP_HOST,
  port: process.env.FTP_PORT,
  user: process.env.FTP_USER,
  password: process.env.FTP_PASS,
  localRoot: process.env.FTP_LOCAL_ROOT,
  remoteRoot: process.env.FTP_REMOTE_ROOT,
});

// Simply copy file from 'src' directory to 'public' directory and upload remote directory
xocs.watch('src/**/*.@(html|php)', ($) => {
  $.copy().upload();
});

// Compile css from 'src' directory to 'public' directory and upload remote directory
xocs.watch(['src/**/*.sass', 'src/**/*.scss'], ($) => {
  $.sass().postcss().upload();
});

You can also write as below, watching public directory insted of src directory.

// Create FTP connection
xocs.remote({
  host: process.env.FTP_HOST,
  port: process.env.FTP_PORT,
  user: process.env.FTP_USER,
  password: process.env.FTP_PASS,
  localRoot: process.env.FTP_LOCAL_ROOT,
  remoteRoot: process.env.FTP_REMOTE_ROOT,
});

// Watching all files in public directory and upload remote directory
xocs.watch('public/**/*', ($) => {
  $.upload();
});

Task Runner

Usage1: Specify tasks from CLI

Register tasks in xocs.mix.js

xocs.task('compile', () => {
  xocs.sass('src/**/*.scss').postcss();
  xocs.imagemin('src/**/*.@(jpg|jpeg|png|gif|svg|webp)');
});

Run task from CLI

$ npx xocs compile

Usage2: Specify tasks in Procedure

Register tasks in xocs.mix.js

xocs.task('compile:html', () => {
  // For example, src/index.html => public/pages/index.html
  xocs.watch('src/**/*.@(html|php)', ($, path) => {
    $.copy(path, 'pages');
  });
});

xocs.task('compile:js', () => {
  xocs.watch('src/**/*.js', ($) => {
    $.babel();
  });
});

xocs.task('compile:css', () => {
  xocs.watch('src/**/*.scss', ($) => {
    $.sass().postcss();
  });
});

xocs.task('compile:img', () => {
  xocs.watch('src/**/*.@(jpg|jpeg|png|gif|svg|webp)', ($) => {
    $.imagemin();
  });
});

xocs.task('preview', () => {
  // Start BrowserSync
  xocs.browser({
    proxy: process.env.PUBLIC_URL,
  });

  // Create FTP connection
  xocs.remote({
    host: process.env.FTP_HOST,
    port: process.env.FTP_PORT,
    user: process.env.FTP_USER,
    password: process.env.FTP_PASS,
    localRoot: process.env.FTP_LOCAL_ROOT,
    remoteRoot: process.env.FTP_REMOTE_ROOT,
  });

  // Upload file to remote host when files in public directory are updated & run BrowserSync
  xocs.watch(['public/assets/**/*', 'public/pages/**/*'], ($) => {
    $.upload().reload();
  });
});

xocs.run('compile:html', 'compile:js', 'compile:css', 'compile:img', 'preview');

Run task from CLI

$ npx xocs

TypeScript_Support

You can write procudure file in TypeScript replacing extention from .js to .ts. xocs.mix.ts example is below.

import xocs, { Thread } from 'xocs';

xocs.init({
  env: '.env.development', // default is s".env"
  srcRoot: 'test/src', // default is "src"
  publicRoot: 'test/public', // default is "public"
});

const { srcRoot, publicRoot } = xocs.config;

xocs.watch(srcRoot + '/assets/css/**/*.scss', ($: Thread) => {
  $.sass().postcss();
});

xocs.watch(srcRoot + '/assets/img/**/*.@(jpg|jpeg|png|gif|svg|webp)', ($: Thread) => {
  $.imagemin();
});

Version

We manage the project version on VERSION.md The versioning scheme we refer is Semantic Versioning.

Contributing

We always welcome your ideas and feedback. To contribute this project, please see CONTRIBUTING.md at first.

Licence

Apache Licence 2.0

Founded by

TANUSUKE