{"id":15207312,"url":"https://github.com/shahedhodali/gulpjs-tips","last_synced_at":"2026-02-08T18:03:00.127Z","repository":{"id":174722836,"uuid":"580766376","full_name":"shahedhodali/gulpjs-tips","owner":"shahedhodali","description":"Gulp Js Tips","archived":false,"fork":false,"pushed_at":"2022-12-27T13:42:58.000Z","size":89,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-06T17:15:04.840Z","etag":null,"topics":["gulp","gulp-autoprefixer","gulp-concat","gulp-livereload","gulp-notify","gulp-plugin","gulp-pug","gulp-sass","gulp-sourcemaps","gulp-uglify","gulp-zip","gulpjs","tips","vinyl-ftp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shahedhodali.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-21T11:51:14.000Z","updated_at":"2022-12-21T12:02:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"ca94453e-9985-4916-a37b-920a0d7024a2","html_url":"https://github.com/shahedhodali/gulpjs-tips","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"239dc86b650faa9fd557b60e241735265a801dcb"},"previous_names":["shahedhodali/gulpjs-tips"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shahedhodali/gulpjs-tips","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahedhodali%2Fgulpjs-tips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahedhodali%2Fgulpjs-tips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahedhodali%2Fgulpjs-tips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahedhodali%2Fgulpjs-tips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shahedhodali","download_url":"https://codeload.github.com/shahedhodali/gulpjs-tips/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shahedhodali%2Fgulpjs-tips/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267693635,"owners_count":24129133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","gulp-autoprefixer","gulp-concat","gulp-livereload","gulp-notify","gulp-plugin","gulp-pug","gulp-sass","gulp-sourcemaps","gulp-uglify","gulp-zip","gulpjs","tips","vinyl-ftp"],"created_at":"2024-09-28T06:41:38.867Z","updated_at":"2026-02-08T18:03:00.040Z","avatar_url":"https://github.com/shahedhodali.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"https://user-images.githubusercontent.com/19249620/209399115-8b4b0ccc-4d68-46ca-b1d0-5ea657a65aef.png\" alt=\"gulp\" width=\"120\"/\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  Gulp Js Tips\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\n\u003ch6 align=\"center\"\u003eGulp is an open source toolkit built on Node.js and npm. It is used for automating and streamlining repetitive tasks in front-end web development.\u003c/h6\u003e\n\n\u003c!--\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#what-you-need-learn\"\u003eWhat You Need\u003c/a\u003e •\n  \u003ca href=\"#what-is-gulp\"\u003eWhat is Gulp\u003c/a\u003e •\n  \u003ca href=\"#why-use-gulp\"\u003eWhy Use Gulp\u003c/a\u003e •\n  \u003ca href=\"#Init package and install gulp\"\u003eInstall\u003c/a\u003e •\n  \u003ca href=\"#related\"\u003eRelated\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n--\u003e\n\n## :dart: What You Need To Learn Gulp\n\n* You Need to Be A Good Front-End Developer\n* You Need A Very Good Knowledge in JavaScript\n* You Need To Know Information About,Preprocessor + Template Engine \n\n## :dart: What is Gulp Js\n\n* Toolkit to Automate Repeated Tasks in Your Development Environment.\n* Gulp Js Built On Node.js\n* Example of Tasks. [ Minify CSS, Compile Sass Or Less, Compress Images, Upload Files ]\n* Other Task Runners: [ Grunt.js, Feri ]\n\n## :dart: Why Should I Use Gulp Js?\n\n* More Than 4252 Plugins and Tasks at Date Of This Rebo.\n* You Can Create Your Own Defined Tasks.\n* Save Your Time and Make You Focus On Code.\n* Give You fast Builds Because its Use Power Of NodeJs.\n* Has 32.7K Star On Github At Date Of This Rebo Means a Very Large Community Using and Updating It.\n* By Using a Task Runner all Your Work Will Be Standard and With One Pattern.\n\n## :checkered_flag: Init package and install gulp ##\n\n```bash\n# Check for node, npm, and npx:\n$ node --version or node -v\n$ npm --version or npm -v\n$ npx --version or npx -v\n\n# Creating a package.json file:\n$ npm init\n\n# Setup the gulp using command line:\n\n# (globaly)\n$ npm install --global gulp-cli  or  npm i gulp -g\n# (localy)\n$ npm install --save-dev gulp    or  npm i --save-dev gulp\n\n# Verify your gulp versions\n$ gulp --version   or gulp -v\n\n# Note : Create folder inside project (name folder)-\u003e(dist)\n\n```\n\n## :white_check_mark: Requirements ##\nBefore starting, gulpfile Js must be created\n- create a file named -\u003e (gulpfile.js) in your project root with these contents\n### Usage EX\n\n```markdown\nvar gulp = require('gulp');\n  //write the first task\n  gulp.task('task name' , function(){});\n\n# Going to the Comand Line:\n$ gulp (task name)\n```\n\n\n## :rocket: Main Functions in gulp js task\n * Retrieve file : \u003cb\u003e src \u003c/b\u003e('file path/') -\u003e [detrmine files names using obj],file name,*.file exitntion, *.*\n * Apply plugins : \u003cb\u003epipe\u003c/b\u003e('plugin to make somthing')\n * Send files to client : \u003cb\u003egulp.dest\u003c/b\u003e('dist') -\u003e all files from complies for client\n\n\n\n## :video_game: Scripts \u0026 Plugins\n ➤ `Concatenation Plugin` : concat files in one file using \u003cb\u003e (gulp-concat) \u003c/b\u003e plugin\u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-concat).\u003cbr\u003e\n       - Install : $ npm install --save-dev gulp-concat or npm i --save-dev gulp-concat.\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n       \n```mark\nvar gulp = require('gulp');\nvar concat = require('gulp-concat');\n  gulp.task('task name' , function(){\n    return gulp.src('files')\n    .pipe(concat('file name concat.ext'))\n    .pipe(gulp.dest('dist'))\n  });\n  # Going to the Comand Line:\n  $ gulp (task name) \n```\n\n ➤ `AutoPrefixer for css3 properties` : Prefix CSS with \u003cb\u003e Autoprefixer \u003c/b\u003eplugin\u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-autoprefixer).\u003cbr\u003e\n       - Install : $ npm install --save-dev gulp-autoprefixer or npm i --save-dev gulp-autoprefixer\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n       \n```mark\nvar gulp = require('gulp');\nvar prefixe = require('gulp-autoprefixer');\n  gulp.task('css' , function(){\n    return gulp.src('project/*.css')\n    .pipe(prefixe('last 2 versions'))\n    .pipe(concat('style.css'))\n    .pipe(gulp.dest('dist'))\n  });\n  # Going to the Comand Line:\n  $ gulp css\n```\n\n ➤ `Sass compiler` : using \u003cb\u003e(gulp-sass)\u003c/b\u003e plugin\u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-sass).\u003cbr\u003e\n       - Install : $ npm install sass gulp-sass --save-dev or npm i sass gulp-sass --save-dev\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n       \n```mark\nvar gulp = require('gulp');\nvar sass = require('gulp-sass');\n  gulp.task('css' , function(){\n    return gulp.src('project/css/*.scss')\n    .pipe(sass({outputStyle: 'compressed'}))\n    .pipe(prefixe('last 2 versions'))\n    .pipe(concat('style.css'))\n    .pipe(gulp.dest('dist/css'))\n  });\n  # Going to the Comand Line:\n  $ gulp css\n```\n\n ➤ `Pug compiler` : to run a webserver using \u003cb\u003e(static-server)\u003c/b\u003e plugin\u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-pug).\u003cbr\u003e\n       - Install : $ npm install gulp-pug  or  npm i gulp-pug \u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n       \n```mark\nvar gulp = require('gulp');\nvar pug = require('gulp-pug');\n  gulp.task('html' , function(){\n    return gulp.src('project/index.pug')\n    .pipe(pug({pretty: true}))\n    .pipe(gulp.dest('dist'))\n  });\n  # Going to the Comand Line:\n  $ gulp html\n```\n\n ➤ `local server` : using \u003cb\u003e(gulp-pug)\u003c/b\u003e plugin\u003cbr\u003e\n       - EXample plugins: (gulp-webserver , gulp-connect , gulp-live-server , static-server , gulp-serve)\n  The most used and the best plugin from my opinion (gulp-connect) run a webserver (with LiveReload) \u003cbr\u003e\n       - link : (https://www.npmjs.com/package/static-server).\u003cbr\u003e\n       - Install : $ npm install static-server  or  npm i static-server \u003cbr\u003e\n       - Make file in the root project name (server.js)\u003cbr\u003e\n       - Put the below code in (server.js) file\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n       \n```mark\nvar StaticServer = require('static-server');\nvar server = new StaticServer({\n    rootPath: '.',            // required, the root of the server file tree\n    port: 1337,               // required, the port to listen\n    name: 'my-http-server',   // optional, will set \"X-Powered-by\" HTTP header\n    host: '10.0.0.100',       // optional, defaults to any interface\n    cors: '*',                // optional, defaults to undefined\n    followSymlink: true,      // optional, defaults to a 404 error\n    templates: {\n      index: 'foo.html',      // optional, defaults to 'index.html'\n      notFound: '404.html'    // optional, defaults to undefined\n    }\n  });\n  server.start(function () {\n    console.log('Server listening to', server.port);\n  });\n  # Going to the Comand Line:\n  $ node server.js or inside task gulp put the code ( require('./server.js'); )\n```\n\n ➤ `Wacth Function` : swatching globs and running a task when a change occurs. \n                      Tasks are handled uniformly with the rest of the task system.\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n```mark\ngulp.task('watch' , function(){\n    require('./server.js');\n  #Single file path\n     gulp.watch('filepath',['task name'])\n  #Multi files\n     gulp.watch('filepath/folder name /**/*.ext',['task name']) \n  });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n ➤ `Live reload` : will not automatically listen for changes using \u003cb\u003e (gulp-livereload) \u003c/b\u003e plugin \u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-livereload).\u003cbr\u003e\n       - Install : $ npm install gulp-livereload or npm i gulp-livereload \u003cbr\u003e\n       - Apply livereload using exitntion chrome or script in html or pug file (\u003cscript src=\"http://localhost:35729/livereload.js?snipver=1\"\u003e\u003c/script\u003e)\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\u003cbr\u003e\n\n```mark\nvar gulp = require('gulp');\nvar livereload = require('gulp-livereload');\n  gulp.task('html' , function(){\n    return gulp.src('project/index.pug')\n    .pipe(pug({pretty: true}))\n    .pipe(gulp.dest('dist'))\n    .pipe(livereload());\n  });\n  gulp.task('watch' , function(){\n    require('./server.js');\n    livereload.listen(); //adding in watch task before watch applied\n     gulp.watch('project/index.pug',['html'])\n  });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n➤ `Gulp source maps` : All plugins between sourcemaps.init() and sourcemaps.write() need to have support for \u003cb\u003e(gulp-sourcemaps)\u003c/b\u003e plugin \u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-sourcemaps).\u003cbr\u003e\n       - Install : $ npm install gulp-sourcemaps or npm i gulp-sourcemaps \u003cbr\u003e\n      - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n```mark\nvar gulp = require('gulp');\nvar sourcemaps = require('gulp-sourcemaps');\n  //pipe(sourcemaps.init()) -\u003e after gulp.src\n  //pipe(sourcemaps.write())-\u003e after tasks and packges before gulp.dest\n\n  gulp.task('html' , function(){\n    return gulp.src('project/index.pug')\n    .pipe(sourcemaps.init())\n    .pipe(pug({pretty: true}))\n    .pipe(sourcemaps.write('.')) // '.' apply this file beside the same file source mapping\n    .pipe(gulp.dest('dist'))\n    .pipe(livereload());\n  });\n  gulp.task('watch' , function(){\n    require('./server.js');\n    livereload.listen(); //adding in watch task before watch applied\n     gulp.watch('project/index.pug',['html']);\n  });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n➤ `Gulp uglify` : Minify JavaScript with UglifyJS3 using \u003cb\u003e(gulp-uglify)\u003c/b\u003e plugin \u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-uglify).\u003cbr\u003e\n       - Install : $ npm install gulp-uglify or npm i gulp-uglify \u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n ```mark\nvar gulp = require('gulp');\nvar uglify = require('gulp-uglify');\n\n gulp.task('js' , function(){\n    return gulp.src('project/js/*.js')\n    .pipe(concat('main.js'))\n    .pipe(uglify())\n    .pipe(gulp.dest('dist/js'))\n    .pipe(livereload());\n });\n # call script (\u003cscript src=\"js/main.js\"\u003e\u003c/script\u003e) inside file html\n gulp.task('watch' , function(){\n    require('./server.js');\n    livereload.listen(); //adding in watch task before watch applied\n    gulp.watch('project/index.pug',['html']);\n    gulp.watch('project/js/*.js',['js']);\n });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n➤ `Gulp notify` : Send messages to Mac Notification Center, Linux notifications (using notify-send) or Windows \u003e= 8 (using native toaster) or Growl as fallback \u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-notify).\u003cbr\u003e\n       - Install : $ npm install gulp-notify or npm i gulp-notify \u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n ```mark\n  var gulp = require('gulp');\n  var notify = require('gulp-notify');\n\n  gulp.task('html' , function(){\n    return gulp.src('project/index.pug')\n    .pipe(pug())\n    .pipe(gulp.dest('dist'))\n    .pipe(notify('Html task is Done'))\n    .pipe(livereload());\n  });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n➤ `Gulp zip` : ZIP compress files \u003cbr\u003e\n       - link : (https://www.npmjs.com/package/gulp-zip).\u003cbr\u003e\n       - Install : $ npm install gulp-zip or npm i gulp-zip \u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n ```mark\n  var gulp = require('gulp');\n  var notify = require('gulp-notify');\n  var zip = require('gulp-zip');\n\n  gulp.task('compress' , function(){\n    return gulp.src('dist/**/*.*')\n    .pipe(zip('design.zip'))\n\t  .pipe(gulp.dest('.'))\n    .pipe(notify('Files is Compressed'))\n  });\n  gulp.task('watch' , function(){\n    require('./server.js');\n    livereload.listen();\n    gulp.watch('project/index.pug',['html']);\n    gulp.watch('project/js/*.js',['js']);\n    gulp.watch('dist/**/*.*',['compress']);\n   });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n➤ `Vinyl ftp` : Supports parallel transfers, conditional transfers, buffered or streamed files, and more.\n                 Often performs better than your favorite desktop FTP client\u003cbr\u003e\n       - link : (https://www.npmjs.com/package/vinyl-ftp).\u003cbr\u003e\n       - Install : $ npm install vinyl-ftp or  npm i vinyl-ftp \u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n ```mark\n  var gulp = require('gulp');\n  var ftp = require( 'vinyl-ftp' );\n\n//Uplode design with FTP\n gulp.task( 'deploy', function () {\n \n    var conn = ftp.create({\n        host:     'test.net',\n        user:     'me',\n        password: 'mypass',\n        parallel: 10\n    });\n \n    // using base = '.' will transfer everything to /public_html correctly\n    // turn off buffering in gulp.src for best performance\n \n    return gulp.src( ['dist/**/*.*'], { base: '.', buffer: false } )\n        .pipe( conn.newer( '/public_html' ) ) // only upload newer files\n        .pipe( conn.dest( '/public_html' ) )\n        .pipe(livereload());\n});\ngulp.task('watch' , function(){\n    require('./server.js');\n    livereload.listen();\n    gulp.watch('project/index.pug',['html']);\n    gulp.watch('project/js/*.js',['js']);\n    gulp.watch('dist/**/*.*',['compress']);\n    gulp.watch('dist/**/*.*',['deploy']);\n });\n  # Going to the Comand Line:\n  $ gulp watch\n```\n\n➤ `Exclude Files`: If all files are called and without one file, put [! name file ] in src function\u003cbr\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n ```mark\n  $ gulp.src(['project/*.js','!project/two.js']);\n```\n\n➤ `Setup Default Task`\u003cbr/\u003e\n       - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n ```mark\n //Default Task\n $ gulp.task('default',['watch']);\n # Going to the Comand Line:\n $ gulp watch\n```\n\n➤ `Some Useful Plugins`\u003cbr\u003e\u003cbr\u003e\n   1- `Gulp Babel`: Use next generation JavaScript, today, with Babel\u003cbr\u003e\n   link : (https://www.npmjs.com/package/gulp-babel)\n\n   2- `Gulp Replace`: A string replace plugin for gulp\u003cbr\u003e\n   link : (https://www.npmjs.com/package/gulp-replace)\n\n   3- `Gulp Load Plugins`: Loads gulp plugins from package dependencies and attaches them to an object of your choice.\u003cbr\u003e\n   link : (https://www.npmjs.com/package/gulp-load-plugins)\n\n   4- `Gulp Rename`: is a gulp plugin to rename files easily.\u003cbr\u003e\n   link : (https://www.npmjs.com/package/gulp-rename)\n\n   5- `Gulp Plumber`: Prevent pipe breaking caused by errors from gulp plugins\u003cbr\u003e\n   link : (https://www.npmjs.com/package/gulp-plumber)\n\n \n➤ `Install specific Version`:\u003cbr\u003e\n     - \u003cb\u003eUsage EX \u003c/b\u003e:\n\n```mark\n $ npm i gulp(v)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahedhodali%2Fgulpjs-tips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshahedhodali%2Fgulpjs-tips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshahedhodali%2Fgulpjs-tips/lists"}