Git Product home page Git Product logo

varunsridharan / easy-gulp-tasker Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 251 KB

This Better Gulp Tasker is mainly focused on simplifying on creating gulp config / task to speed up the development process.

Home Page: https://www.npmjs.com/package/easy-gulp-tasker

License: GNU General Public License v3.0

JavaScript 100.00%
gulp gulp-tasks gulp-plugin gulp-starter gulp-sass gulp-scss gulp-babel gulp-webpack gulp-concat gulp-combine-files gulp-template gulp-task gulpjs javascript-library

easy-gulp-tasker's Introduction

NPM version Downloads Gitter chat

Easy Gulp Tasker

This Easy Gulp Tasker is mainly focused on simplifying on creating gulp config / task to speed up the development process.

Features / Plugins

Javascript

SCSS

Gulp Plugins


Usage / Options

Step 1

Run the below cmd first npm install easy-gulp-tasker --save-dev

Step 2

Create a gulpfile.js in your project root and add the blow line

const $gulp_tasker = require('easy-gulp-tasker');

Sample gulpfile.js

const $gulp_tasker = require( 'easy-gulp-tasker' );
const $gulp        = require( 'gulp' );


$gulp.task( 'your-task', () => {
	// Your Custom Tax Code.
} );

Step 3

Create gulp-config.js OR config.js with the file configs.

Sample Config File

module.exports = {
	files: {
		// Single Compile Options
		'dir/your-file-source': {
			dist: 'path-to-save',
			rename: 'custom-file-name',
			bable: {
			// Your Custom Config For **Babel** 
			// Or Set True to use deafult config provided by Easy Gulp Tasker Plugin.
			// If not pass a custom string and use that string in the config array to build your own common config.
			}
			watch:['file1','file2','file3'] // enter the files that are needed to be watched to trigger the above actions.
		},

		// Multiple Compile Options
		'dir2/your-file-source': [
			{
				dist: 'path-to-save',
				rename: 'custom-file-name',
				bable: true
			},
			{
				dist: 'path-to-save',
				rename: 'custom-file-name',
				bable: true,
				uglify: true
			}
		]
	},

	config: {
		// Here you can write your custom config
		bable_custom_config1: {
			presets: [ '@babel/env' ],
		}
	},
};

Step 4

Run any of the below cmd to use this plugin

The below cmd will compile all the files are listed in the config.js / gulp-config.js

$ gulp compile

The below cmd will trigger gulp.watch function to keep track of files changes and compiles the given file.

$ gulp watch

The below cmd will trigger a single file to compile

$ gulp single --file "dir/your-file-source"


Builtin Tasks

Blow is a list of task / config options for each file object.

General

  • dist:'file-save-path' | Location On Where To Save The File.
  • rename:'custom-file-name' | Custom File Name To Save Compiled File
  • watch:['file1','file2','file3'] | An Array of files to keep an eye for change to trigger its tasks
  • concat:true | Please Refer To Gulp Concat
  • combine_files:true | Please Refer To Gulp Combine Files

SCSS / CSS

  • scss:true | Converts SCSS Into CSS
  • minify:true | Minify Source.
  • autoprefixer:true | Autoprefix All CSS Properties.

Javascript

  • webpack:true | Run's Webpack To Compile / Bundle a file
  • bable:true | Run's Babel To Convert EM6 => EM6
  • uglify:true | Minify JS Soure Code

Contribute

If you would like to help, please take a look at the list of issues or the To Do checklist.

License

This project is licensed under General Public License v3.0 license. See the LICENSE file for more info.

Copyright

2017 - 2018 Varun Sridharan, varunsridharan.in

If you find it useful, let me know ๐Ÿ˜‰

You can contact me on Twitter or through my email.

Backed By

DigitalOcean JetBrains Tidio Chat

easy-gulp-tasker's People

Contributors

dependabot-preview[bot] avatar dependabot-support avatar varunsridharan avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.