Test

Hello

-assets/
-css/
-scss/
-about.scss
-contact.scss
-home.scss
-gulp.main.css
-gulp.main.min.css
-js/
-src/
-ajax.js
-public.js
-gulp.main.js
-gulp.main.min.js
-lang/
-node_modules/ (will be created)
-releases/ (for plugin packages)
-index.php
-gulpfile.js
-package.json (will be created)
view raw 0-directory-structure.txt hosted with ❤ by GitHub
#install gulp globally
$ sudo npm install gulp -g
view raw a1-install-global-gulp.txt hosted with ❤ by GitHub
$ npm init
# The above command will create the package.json file
view raw a2-init-npm.txt hosted with ❤ by GitHub
{
"name": "gulp-tutorial",
"version": "1.0.0",
"description": "Gulp Tutorial",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "bappi-d-great",
"license": "ISC"
}
view raw a3-package.json hosted with ❤ by GitHub
# Install gulp locally
npm install gulp --save-dev
view raw a4-install-gulp-locally.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
view raw a5-configure-gulpfile.js hosted with ❤ by GitHub
gulp.task( 'mytask', function () {
// Code goes here
} );
view raw a6-define-gulp-task.txt hosted with ❤ by GitHub
gulp.task( 'mytask', function () {
console.log( 'Hello Mars!' );
} );
// Now run in terminal
$ gulo mytask
view raw a7-gulp-task-example.txt hosted with ❤ by GitHub
# first gulp task directory
WPGEEK ➜ gulp gulp mytask
[23:38:06] Using gulpfile /Applications/MAMP/htdocs/m2-single/wp-content/plugins/gulp/gulpfile.js
[23:38:06] Starting 'mytask'...
Hello Mars!
[23:38:06] Finished 'mytask' after 157 μs
view raw a8-gulp-mytask-output.txt hosted with ❤ by GitHub
gulp.task( 'task-name-here', function() {
gulp
// get source file
.src( 'path/to/source/file' )
// send the source through any plugin
.pipe( pluginFunction() )
// send output to the destina
.pipe( gulp.dest( 'path/to/destination/file' ) )
} );
view raw a9- gulp-default-example.js hosted with ❤ by GitHub
$ npm install gulp-sass --save-dev
view raw b10-install-gulp-sass hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
view raw b11-sass-gulpfile.js hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
gulp.task( 'sass', function() {
gulp
.src( 'assets/css/scss/about.scss' )
.pipe( sass() )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw b12-sass-gulp.js hosted with ❤ by GitHub
@function calc-percent( $target, $container ) {
@return ( $target / $container ) * 100%;
}
#about{
color: red;
width: calc-percent( 650px, 1000px );
}
view raw b13-demo-sass.scss hosted with ❤ by GitHub
#about {
color: red;
width: 65%; }
view raw b14-output-new.css hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
gulp.task( 'sass', function() {
gulp
.src( 'assets/css/scss/*.scss' )
.pipe( sass() )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw b15-sass-multiple-files-gulp.js hosted with ❤ by GitHub
$ npm install --save-dev gulp-concat
view raw b16-general-single-css-file-from-multiple-sass-file.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
gulp.task( 'sass', function() {
gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sass() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw b17-gulp-with-contact.js hosted with ❤ by GitHub
$ npm install --save-dev gulp-minify-css
view raw b18-minify-css.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
gulp.task( 'sass', function() {
gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sass() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw b19-gulp-with-minify.js hosted with ❤ by GitHub
$ npm install gulp-autoprefixer --save-dev
view raw c20-auto-pre-fixer.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
var autoprefixer = require( 'gulp-autoprefixer' );
gulp.task( 'sass', function() {
gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sass() )
.pipe( autoprefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw c21-gulp-with-pre-fixer.js hosted with ❤ by GitHub
$ npm install gulp-sourcemaps --save-dev
view raw c21-using-sourcemap.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
var autoPrefixer = require( 'gulp-autoprefixer' );
var sourceMaps = require( 'gulp-sourcemaps' );
// I just changed the task name to "build-css"
gulp.task( 'build-css', function() {
gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw c22-gulp-with-sourcemap.js hosted with ❤ by GitHub
$ npm install gulp-rename --save-dev
view raw c23-rename-file.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
var autoPrefixer = require( 'gulp-autoprefixer' );
var sourceMaps = require( 'gulp-sourcemaps' );
var rename = require( 'gulp-rename' );
gulp.task( 'build-css', function() {
gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
} );
view raw c24-gulp-with-rename.js hosted with ❤ by GitHub
$ npm install --save-dev gulp-uglify
view raw c25-uglify.txt hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
var autoPrefixer = require( 'gulp-autoprefixer' );
var sourceMaps = require( 'gulp-sourcemaps' );
var rename = require( 'gulp-rename' );
var uglify = require( 'gulp-uglify' );
gulp.task( 'build-css', function() {
return gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) );
} );
gulp.task( 'build-js', function() {
return gulp
.src( 'assets/js/src/**/*.js' )
.pipe( sourceMaps.init() )
.pipe( concat( 'gulp.main.js' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) )
.pipe( uglify() )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) );
} );
view raw c26-gulp-uglify.js hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
var autoPrefixer = require( 'gulp-autoprefixer' );
var sourceMaps = require( 'gulp-sourcemaps' );
var rename = require( 'gulp-rename' );
var uglify = require( 'gulp-uglify' );
gulp.task( 'build-css', function() {
return gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) );
} );
gulp.task( 'build-js', function() {
return gulp
.src( 'assets/js/src/**/*.js' )
.pipe( sourceMaps.init() )
.pipe( concat( 'gulp.main.js' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) )
.pipe( uglify() )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) );
} );
gulp.task( 'watch', function() {
gulp.watch( 'assets/css/scss/**/*.scss', ['build-css'] );
gulp.watch( 'assets/js/src/**/*.js', ['build-js'] );
} );
view raw c27-gulp-watch.js hosted with ❤ by GitHub
var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var concat = require( 'gulp-concat' );
var minifyCss = require( 'gulp-minify-css' );
var autoPrefixer = require( 'gulp-autoprefixer' );
var sourceMaps = require( 'gulp-sourcemaps' );
var rename = require( 'gulp-rename' );
var uglify = require( 'gulp-uglify' );
var pkg = require( './package.json' )
gulp.task( 'build-css', function() {
return gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) );
} );
gulp.task( 'build-js', function() {
return gulp
.src( 'assets/js/src/**/*.js' )
.pipe( sourceMaps.init() )
.pipe( concat( 'gulp.main.js' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) )
.pipe( uglify() )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) );
} );
gulp.task( 'watch', function() {
gulp.watch( 'assets/css/scss/**/*.scss', ['build-css'] );
gulp.watch( 'assets/js/src/**/*.js', ['build-js'] );
} );
gulp.task( 'build', function() {
gulp
.src( [
'index.php',
'**/assets/**/*'
] )
.pipe( gulp.dest( 'releases/' + pkg.version + '/' ) )
} );
gulp.task( 'default', ['build-css', 'build-js'] );
view raw c28-gulp-copy-to-release.js hosted with ❤ by GitHub
$ npm install --save-dev gulp-zip
view raw c29-zip-module.txt hosted with ❤ by GitHub
var pkg = require( './package.json' );
var gulp = require( 'gulp' ),
sass = require( 'gulp-sass' ),
concat = require( 'gulp-concat' ),
minifyCss = require( 'gulp-minify-css' ),
autoPrefixer = require( 'gulp-autoprefixer' ),
sourceMaps = require( 'gulp-sourcemaps' ),
rename = require( 'gulp-rename' ),
uglify = require( 'gulp-uglify' ),
zip = require( 'gulp-zip' );
gulp.task( 'build-css', function() {
gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) );
} );
gulp.task( 'build-js', function() {
gulp
.src( 'assets/js/src/**/*.js' )
.pipe( sourceMaps.init() )
.pipe( concat( 'gulp.main.js' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) )
.pipe( uglify() )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) );
} );
gulp.task( 'watch', function() {
gulp.watch( 'assets/css/scss/**/*.scss', ['build-css'] );
gulp.watch( 'assets/js/src/**/*.js', ['build-js'] );
} );
gulp.task( 'build', function() {
gulp
.src( [
'index.php',
'**/assets/**/*'
] )
.pipe( gulp.dest( 'releases/' + pkg.version + '/' ) )
} );
gulp.task( 'zip', function() {
gulp
.src( 'releases/' + pkg.version + '/**/*' )
.pipe( zip( pkg.name + '-' + pkg.version + '.zip' ) )
.pipe( gulp.dest( 'releases/' ) )
} );
gulp.task( 'default', ['build-css', 'build-js', 'build', 'zip'] );
view raw d30-gulp-zip.js hosted with ❤ by GitHub
view raw d31-mkpot-tool.txt hosted with ❤ by GitHub
gulp.task( 'i18n', shell.task(
'php /Users/ashokkumarnath/Desktop/pot/wp-dev/tools/i18n/makepot.php wp-plugin . lang/gtd.po'
));
view raw d32-pot-gulp.js hosted with ❤ by GitHub
var pkg = require( './package.json' );
var gulp = require( 'gulp' ),
sass = require( 'gulp-sass' ),
concat = require( 'gulp-concat' ),
minifyCss = require( 'gulp-minify-css' ),
autoPrefixer = require( 'gulp-autoprefixer' ),
sourceMaps = require( 'gulp-sourcemaps' ),
rename = require( 'gulp-rename' ),
uglify = require( 'gulp-uglify' ),
zip = require( 'gulp-zip' );
var build_css = function() {
return gulp
.src( 'assets/css/scss/**/*.scss' )
.pipe( sourceMaps.init() )
.pipe( sass() )
.pipe( autoPrefixer() )
.pipe( concat( 'gulp.main.css' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) )
.pipe( minifyCss( {
compatibility: 'ie8'
} ) )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/css/' ) );
}
gulp.task( 'build-css', build_css );
var build_js = function() {
return gulp
.src( 'assets/js/src/**/*.js' )
.pipe( sourceMaps.init() )
.pipe( concat( 'gulp.main.js' ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) )
.pipe( uglify() )
.pipe( rename( {
suffix: '.min'
} ) )
.pipe( sourceMaps.write() )
.pipe( gulp.dest( 'assets/js/' ) );
}
gulp.task( 'build-js', build_js );
var build_watch = function() {
gulp.watch( 'assets/css/scss/**/*.scss', ['build-css'] );
gulp.watch( 'assets/js/src/**/*.js', ['build-js'] );
}
gulp.task( 'watch', build_watch );
var build = function() {
return gulp
.src( [
'index.php',
'**/assets/**/*',
'!**releases/**/*'
] )
.pipe( gulp.dest( 'releases/' + pkg.version + '/' ) );
}
gulp.task( 'build', ['build-js', 'build-css'], build );
var gzip = function() {
return gulp
.src( 'releases/' + pkg.version + '/**/*' )
.pipe( zip( pkg.name + '-' + pkg.version + '.zip' ) )
.pipe( gulp.dest( 'releases/' ) )
}
gulp.task( 'zip', ['build'], gzip );
gulp.task( 'default', ['build-css', 'build-js', 'build', 'zip'] );
view raw e-final-gulpfile.js hosted with ❤ by GitHub
{
"name": "gulp-tutorial",
"version": "1.0.0",
"description": "Gulp Tutorial",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "bappi-d-great",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.3",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.1",
"gulp-zip": "^3.0.2"
}
}
view raw e-final-package.json hosted with ❤ by GitHub
<?php
/*
Plugin Name: Membership Gulp Integration Tutorial
Plugin URI: ashok.press/
Description: Managing membership plugin using gulp
Version: 1.0.0
Author: Bappi D Great
Author URI: ashok.press/
License: GPLv2 or later
Text Domain: gtd
*/
if( ! defined( 'ABSPATH' ) ) die( __( 'This is not your playground...', 'gtd' ) );
if( ! class_exists( 'GulpTest' ) ) {
class GulpTest {
private function __construct() {
add_filter( 'the_content', array( &$this, 'filter_content' ) );
add_action( 'wp_enqueue_scripts', array( &$this, 'wp_enqueue_scripts' ) );
}
public static function get_instance() {
static $Inst = null;
if( $Inst === null ) {
$Inst = new self();
}
return $Inst;
}
public function filter_content( $content ) {
$str = __( 'This is contact page', 'gtd' );
return '<div class="contact">' . $str . '</div>';
}
public function wp_enqueue_scripts() {
$prefix = '';
if(
defined( 'WP_DEBUG' ) &&
WP_DEBUG &&
defined( 'SCRIPT_DEBUG' ) &&
SCRIPT_DEBUG
) {
$prefix = '.min';
}
wp_enqueue_style( 'gulp-css', plugins_url( "/assets/css/gulp.main{$prefix}.css", __FILE__ ) );
wp_enqueue_script( 'gulp-js', plugins_url( "/assets/js/gulp.main{$prefix}.js", __FILE__ ), array( 'jquery' ) );
}
}
GulpTest::get_instance();
}
view raw e-final-plugin.php hosted with ❤ by GitHub

<?php
add_filter( 'the_content', 'featured_image_in_feed' );
function featured_image_in_feed( $content ) {
global $post;
if( is_feed() ) {
if ( has_post_thumbnail( $post->ID ) ){
$output = get_the_post_thumbnail( $post->ID, 'medium', array( 'style' => 'float:right; margin:0 0 10px 10px;' ) );
$content = $output . $content;
}
}
return $content;
}
?>
view raw rssfeedimage.php hosted with ❤ by GitHub