From df60b5093ffb7b1999abd83de046534b89f7d39f Mon Sep 17 00:00:00 2001 From: Jerome Dane Date: Sat, 21 Nov 2015 13:06:57 -0500 Subject: [PATCH] Updated gulp task names --- gulp/chrome.js | 48 +++++++++++++++++++++++++--------------- gulp/script.js | 31 +++++++++----------------- readme.md | 12 +++++----- src/chrome/manifest.json | 4 ++-- src/userscript.code.js | 28 +++++++++++++---------- 5 files changed, 65 insertions(+), 58 deletions(-) diff --git a/gulp/chrome.js b/gulp/chrome.js index af236cb..80cb776 100644 --- a/gulp/chrome.js +++ b/gulp/chrome.js @@ -1,32 +1,56 @@ var gulp = require('gulp'); var del = require('del'); var getPackageDetails = require('./package-details'); +var io = require('socket.io'); var template = require('gulp-template'); var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); var rename = require("gulp-rename"); +var watch = require('gulp-watch'); +var webpack = require('webpack-stream'); var zip = require('gulp-zip'); // web socket port for chrome auto-reload extension (https://github.com/JeromeDane/chrome-extension-auto-reload) var WEB_SOCKET_PORT = 8890; // generate a zip file for the chrome extension -gulp.task('chrome', ['chrome-build'], function () { +gulp.task('chrome:dist', ['chrome:build'], function () { return gulp.src('build/chrome/**') .pipe(zip('chrome-extension-v' + getPackageDetails().version + '.zip')) .pipe(gulp.dest('dist/chrome')); }); // build the chrome extension -gulp.task('chrome-build', ['script', 'chrome-manifest', 'chrome-options', 'chrome-images', 'chrome-script'], function (callback) { +gulp.task('chrome:build', ['chrome-manifest', 'chrome-options', 'chrome-images', 'chrome-script'], function (callback) { callback(); }); -// copy userscript to chrome build directory +// Create a full build for Chrome and automatically update it when files change +gulp.task('chrome:watch', ['chrome:build', 'chrome-watch-manifest', 'chrome-watch-options'], function (callback) { + gulp.watch('src/**/*.*', ['chrome-manifest', 'chrome-script', 'chrome-options']); + + io = io.listen(WEB_SOCKET_PORT); + watch('./build/chrome/**', function (file) { + console.log('change detected', file.relative); + io.emit('file.change', {}); + }); +}); + +// pack content script for Chrome gulp.task('chrome-script', ['script'], function () { - return gulp.src('dist/userscript/userscript.user.min.js') - .pipe(rename('userscript.user.js')) - .pipe(gulp.dest('build/chrome')); + + return gulp.src("./src/userscript.code.*") + .pipe(webpack({ + module: { + loaders: [ + {test: /\.png$/, loader: "url-loader?mimetype=image/png"}, + {test: /\.css$/, loader: 'style!css' } + ] + }, + devtool: 'inline-source-map' + })) + .pipe(rename("content.js")) + .pipe(gulp.dest('./build/chrome')); }); // generate the chrome manifest from the template @@ -68,15 +92,3 @@ gulp.task('chrome-watch-options', function() { gulp.task('chrome-watch-script', function() { gulp.watch('src/userscript/*.*', ['chrome-script']); }); - -// Create a full build for Chrome and automatically update it when files change -gulp.task('chrome-watch', ['chrome-build', 'chrome-watch-manifest', 'chrome-watch-options'], function (callback) { - gulp.watch('src/**/*.*', ['chrome-manifest', 'chrome-script', 'chrome-options']); - - io = io.listen(WEB_SOCKET_PORT); - watch('./build/chrome/**', function (file) { - console.log('change detected', file.relative); - io.emit('file.change', {}); - }); -}); - diff --git a/gulp/script.js b/gulp/script.js index a246082..db07d9d 100644 --- a/gulp/script.js +++ b/gulp/script.js @@ -1,12 +1,3 @@ -/* - * Gulp tasks: - * - * default Create full builds and distribution files for all platforms - * build-chrome Create a full build for Chrome - * dist-chrome Create a full distribution file for Chrome - * watch-chrome Create a full build for Chrome and automatically update it when files change - */ - var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var del = require('del'); @@ -24,6 +15,17 @@ gulp.task('script', ['script-merge-min'], function() { del("build/userscript"); }); +// Automatically update dist/userscript/userscript.user.js when changes are made to files in src/ +gulp.task('script:watch', ['script'], function (callback) { + gulp.watch('src/**/*.*', ['script-build']); + + io = io.listen(WEB_SOCKET_PORT); + watch('./build/chrome/**', function (file) { + console.log('change detected', file.relative); + io.emit('file.change', {}); + }); +}); + // generate the script header required for userscript parsers like Greasemonkey gulp.task('script-header', function() { return gulp.src('./src/userscript.head.js') @@ -71,14 +73,3 @@ gulp.task('script-merge-min', ['script-min', 'script-header'], function(callback .pipe(concat('userscript.user.min.js')) .pipe(gulp.dest("./dist/userscript")); }); - -// Automatically update dist/userscript/userscript.user.js when changes are made to files in src/ -gulp.task('script-watch', ['script'], function (callback) { - gulp.watch('src/**/*.*', ['script-build']); - - io = io.listen(WEB_SOCKET_PORT); - watch('./build/chrome/**', function (file) { - console.log('change detected', file.relative); - io.emit('file.change', {}); - }); -}); diff --git a/readme.md b/readme.md index 3f5e937..2d4ee4c 100644 --- a/readme.md +++ b/readme.md @@ -41,16 +41,16 @@ If you make useful changes, please create a pull request so I can get them merge The following gulp build tasks can be used by running them on in your command line interface: * `gulp script` - Compile a userscript version of this code to `dist/userscript` -* `gulp chrome-build` - Create `build/chrome` directory and files which can be loaded as an unpacked extension -* `gulp chrome` - Same as `chrome-build`, plus create a zip file in `dist/chrome/chrome-extensionv[version].zip` +* `gulp chrome:build` - Create `build/chrome` directory and files which can be loaded as an unpacked extension +* `gulp chrome:dist` - Create a zip file in `dist/chrome/chrome-extensionv[version].zip` * `gulp clean` - Removes `dist/` and `build/` folders, along with their contents #### Watching for Changes in Source Code You can watch the source code for changes and automatically re-build the related files by starting the following gulp tasks: -* `gulp script-watch` - Watch for changes in the `src/` folder, and automatically update `build/userscript/` -* `gulp chrome-watch` - Watch for changes in the `src/` folder, and automatically update `build/chrome/` +* `gulp script:watch` - Watch for changes in the `src/` folder, and automatically update `build/userscript/` +* `gulp chrome:watch` - Watch for changes in the `src/` folder, and automatically update `build/chrome/` #### Troubleshooting @@ -60,7 +60,7 @@ If you get an error about `gulp` not being in your path when you run the command Using `gulp chrome-watch` with [Chrome Extension Auto Reload](https://github.com/JeromeDane/chrome-extension-auto-reload) installed and running allows you to load this project as an unpacked extension from `build/chrome` and have it automatically reload any time the files in `src/` are changed. This saves you having to go to the Chrome extensions tab and hit reload every time you make any changes. -## License +## License [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by-nc-sa/3.0/) @@ -68,4 +68,4 @@ You can share or modify this work as long as you: 1. Link back to this page 2. Don't use this or derivatives of this for commercial use -3. Share your changes so that others can benifit from your improvements. +3. Share your changes so that others can benifit from your improvements. diff --git a/src/chrome/manifest.json b/src/chrome/manifest.json index 9b5b3f2..379af3b 100644 --- a/src/chrome/manifest.json +++ b/src/chrome/manifest.json @@ -13,9 +13,9 @@ "web_accessible_resources":["images/close_16_r8.png"], "content_scripts": [ { - "js": ["userscript.user.js"], + "js": ["content.js"], "matches": ["http://www.youtube.com/*", "https://www.youtube.com/*"], "run_at": "document_end" } ] -} \ No newline at end of file +} diff --git a/src/userscript.code.js b/src/userscript.code.js index c879040..f939d1b 100644 --- a/src/userscript.code.js +++ b/src/userscript.code.js @@ -3,7 +3,7 @@ require('./userscript.style.css'); var click = require('simulate-click-js'); function RemoveFeedFromYouTube() { - + // configuration variables var removeButtonClass = 'bcRemoveButton'; var feedItemContainerClass = 'feed-item-container'; @@ -24,7 +24,7 @@ function RemoveFeedFromYouTube() { window.scroll(x,y); },50); } - + function removePost(postElem) { var removeTrigger = getRemoveTrigger(postElem); click(removeTrigger); @@ -45,6 +45,10 @@ function RemoveFeedFromYouTube() { // inject a remove button into a post function injectButton(postElem) { if(!postElem.className.match(/buttonEnabled/)) { + + postElem.style.border = '2px solid red'; + return; + postElem.className += ' buttonEnabled'; var removeTrigger = getRemoveTrigger(postElem); if(removeTrigger) { @@ -69,7 +73,7 @@ function RemoveFeedFromYouTube() { // listen for new videos in the DOM and add the remove button as necessary function listenForNewVideos() { - + var target = document.querySelector(feedWrapperSelector); // create an observer instance @@ -86,13 +90,13 @@ function RemoveFeedFromYouTube() { } }); }); - + // configuration of the observer: var config = { attributes: true, childList: true, characterData: true } // pass in the target node, as well as the observer options observer.observe(target, config); - + } function removeAllWatched() { @@ -113,15 +117,15 @@ function RemoveFeedFromYouTube() { button.id = "bcRemoveAll"; button.className = "yt-uix-button feed-header-message secondary-nav yt-uix-sessionlink yt-uix-button-epic-nav-item yt-uix-button-size-default"; button.innerHTML = 'Remove All Watched'; - + button.onclick = removeAllWatched; - + // insert remove watched button next to manage subscriptions button var target = document.querySelector('.feed-header .feed-manage-link'); target.parentNode.insertBefore(button, target.nextSibling); - + console.log('remove button injected'); - + } /* @@ -136,14 +140,14 @@ function RemoveFeedFromYouTube() { }); }); */ - + function init() { injectButtonsIntoPosts(); listenForNewVideos(); injectRemoveWatchedButton(); console.log('Remove from feed for YouTube successfully initialized'); } - + return { init: init }; @@ -151,4 +155,4 @@ function RemoveFeedFromYouTube() { module.exports = RemoveFeedFromYouTube; -(new RemoveFeedFromYouTube).init(); \ No newline at end of file +(new RemoveFeedFromYouTube).init();