In my native script project, I have used angular-native-seed. Everything does work except Live sync. The same was raised in git hub under the issue list, still it does not resolve by anyone.
Whenever file change, gulp watch is called but failed to overwrite app folder from src folder (see the last comments in the below-mentioned url thread).
URL : enter link description here
Gulpfile.js
gulp.task('tns.Livesync', () => {
return gulp.watch([`../${SRC}**/*.common.ts`, `../${SRC}**/*.tns.ts`, `../${SRC}**/*.tns.html`, `../${SRC}**/*.service.ts`,
`../${SRC}**/*.tns.scss`, `../${SRC}**/*.scss`, `../${SRC}**/*.component.ts`, `../${SRC}**/*.routes.ts`,
`../${SRC}**/*.index.ts`])
.on('change', (file) => {
var outputDest = file.substring(0, file.lastIndexOf('\\')+1).replace(SRC.substring(0, SRC.length - 1), DEST).replace('..\\', '');
console.log('File-->' + file);
console.log('Des-->' + outputDest);
gulp.src([file])
.pipe(rename(removeTns))
.pipe(replace('.scss\'', '.css\'', { logs: { enabled: true }}))
.pipe(debug({title: 'tns.Livesync'}))
.pipe(debug({title: 'out ' + outputDest}))
.pipe(gulp.dest(outputDest, {overwrite: true}));
});
});
Anybody help me ?
This work for me:
gulp.task('tns.Livesync', () => {
return gulp.watch([`../${SRC}**/*.common.ts`, `../${SRC}**/*.tns.ts`, `../${SRC}**/*.tns.html`, `../${SRC}**/*.service.ts`,
`../${SRC}**/*.tns.scss`, `../${SRC}**/*.scss`, `../${SRC}**/*.component.ts`, `../${SRC}**/*.routes.ts`,
`../${SRC}**/*.index.ts`])
.on('change', (file) => {
var outputDest = file.substring(0, file.lastIndexOf('\\')+1).replace('src\\', 'app\\').replace('..\\', '');
gulp.src([file])
.pipe(rename((path) => { path.dirname = ''; }))
.pipe(rename(removeTns))
.pipe(replace('.scss\'', '.css\'', { logs: { enabled: true }}))
.pipe(debug({title: 'tns.Livesync'}))
.pipe(debug({title: 'out ' + outputDest}))
.pipe(gulp.dest(outputDest, {overwrite: true}));
});
});
Related
It was all good and working when i was testing my code on local server.
But always when i test the same code on live server it gives errors.
Actually, I am working with Filepond using Laravel and creating a website.
This is Edit Blade Js
<pre>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(
FilePondPluginMediaPreview,
FilePondPluginImagePreview,
FilePondPluginFileValidateType,
FilePondPluginFileValidateSize,
FilePondPluginFilePoster
);
const inputElement1 = document.querySelector('input[id="card_image_id"]');
const inputElement2 = document.querySelector('input[id="video"]');
const workimages = document.querySelector('input[id="workimages"]');
const pond1 = FilePond.create(inputElement1, {
acceptedFileTypes: ['image/*'],
fileValidateTypeDetectType: true,
maxFileSize: 10000000, //10 mbs max size
allowFileSizeValidation: true,
onaddfilestart: (file) => {
isLoadingCheck();
},
onprocessfile: (files) => {
isLoadingCheck();
},
});
const pond2 = FilePond.create(inputElement2, {
acceptedFileTypes: ['video/*'],
fileValidateTypeDetectType: true,
maxFileSize: 35000000, //35 mbs max size
allowFileSizeValidation: true,
onaddfilestart: (file) => {
isLoadingCheck();
},
onprocessfile: (files) => {
isLoadingCheck();
},
});
const pond3 = FilePond.create(workimages, {
acceptedFileTypes: ['image/*'],
fileValidateTypeDetectType: true,
maxFileSize: 10000000, //10 mbs max size
allowFileSizeValidation: true,
onaddfilestart: (file) => {
isLoadingCheck();
},
onprocessfile: (files) => {
isLoadingCheck();
},
});
FilePond.setOptions({
server: {
process: '/tempupload',
revert: '/tempdelete/{{ $fileid }}',
// fetch: '/tempfetch',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'work_id': '{{ $work->id }}'
},
},
});
</script>
</pre>
This is web routes
<pre>
Route::delete('tempdelete', [WorkController::class, 'tempdelete'])->name('tempdelete');
</pre>
This is controller
<pre>
public function tempdelete()
{
$this->WorkService->tempdelete();
return response()->json(null, 204);
}
</pre>
This is Service
<pre>
public function tempdelete()
{
$work_id = (request()->header('work-id'));
$temporaryfile = TemporaryFile::where('fid', request()->getContent())->first();
if ($temporaryfile) {
$filesexist_in_workimages = Workimage::where([
'size' => $temporaryfile->size,
'name' => $temporaryfile->filename,
'work_id' => $work_id,
])->first();
if (isset($filesexist_in_workimages)) {
if (File::exists($filesexist_in_workimages->folder)) {
File::delete($filesexist_in_workimages->folder);
}
$filesexist_in_workimages->delete();
}
if (isset($temporaryfile->folder)) {
if (File::exists($temporaryfile->folder . $temporaryfile->filename)) {
File::delete($temporaryfile->folder . $temporaryfile->filename);
}
}
$temporaryfile->delete();
}
}
</pre>
The point is that this code works perfectly for deleting a file on local server but shows this error on live server
On Console:
<pre>
DELETE http://brokenclient1.000webhostapp.com/tempdelete net::ERR_EMPTY_RESPONSE
</pre>
On Network:
Failed to load responce, No data found for source with given identifier
When i try to dd on controller or service it does not even works to show dd.
This problem is not connected with FilePond. Are you using Postman or Insomnia to check your API and connection? Check your server settings. Try this solution provided in this link
Laravel Project ERR_EMPTY_RESPONSE
This is typical server error response or sometimes Internet Service Provider error.
Part 1 question: Cypress: How can we bypass cross origin error in Firefox? (iframes)
Hi, this is the part two for my question. I am also currently testing download functionality which needs to go to a different domain to check. I also list the format of the webpages. I altered my code a bit to not include sensitive information.
The process is:
From original application website, user will download the course (starting.originalWebsite.com)
Download link will be sent to the user's email, contains iframe (emailWebsite.com)
Mail contains username and password to access the document from the download link (download.originalWebsite.com)
User checks the contents of the downloaded document
The test stops after visiting the new link (original link: starting.originalWebsite.com, new link: emailWebsite.com) because it's already outside cy.origin() syntax. My problem with cy.origin() is that the email contains iframes and cy.origin() views the iframe as its native page. Cypress cannot see the original native page anymore and I cannot anymore interact with it. I also have the chromeWebSecurity set to false.
The code below works in Chrome but not in Firefox because we're getting the error below. What can I possibly do for this? So Firefox will allow my testing. Thank you!
And('user goes to mailtrap, logins and checks for the email link', () => {
const credentials = {
username: testdata.credentials.username,
password: testdata.credentials.password
}
cy.origin(Cypress.config().mailtrapUrl, { args: credentials }, ({ username, password }) => {
cy.visit(Cypress.config().mailtrapUrl)
})
mailtrapPO.getSignin().click()
cy.explicitWait()
mailtrapPO.getEmailField().scrollIntoView().click().type(testdata.credentials.username)
mailtrapPO.getNextButton().scrollIntoView().click()
cy.explicitWait()
mailtrapPO.getPasswordField().scrollIntoView().click().type(testdata.credentials.password)
mailtrapPO.getLoginButton().scrollIntoView().click()
cy.explicitWait()
mailtrapPO.getTransferStagingInbox().click()
cy.explicitWait()
mailtrapPO.getMessageList()
.find('span')
.contains('mail title')
.eq(0)
.scrollIntoView()
.click({ force: true })
mailtrapPO.getHTMLSourceTab().click({ force: true })
mailtrapPO.getCode().children().within((code) => {
var downloadUrl = Cypress.env('downloadCoursesUrl')
cy.get('span').contains('Password: ').scrollIntoView().invoke('text').then((documentDownloadPassword) => {
cy.wrap(documentDownloadPassword).as('passwordHint')
cy.log(documentDownloadPassword)
cy.get('#passwordHint').then((downloadPassword) => {
var delimeter = 'Password: ',
passwordIndex = delimeter.length
cy.wrap(downloadPassword.substring(passwordIndex)).as('documentPassword')
})
})
cy.get('span').contains(downloadUrl).scrollIntoView().invoke('text').then((documentDownloadLink) => {
cy.wrap(documentDownloadLink).as('downloadLink')
cy.log(documentDownloadLink)
cy.get('#downloadLink').then((link) => {
var cleanLink = link.replaceAll('"', '')
cy.log(cleanLink)
var delimeter = Cypress.env('downloadhmmm'),
linkFirstIndex = delimeter.length
cy.log(linkFirstIndex)
cy.wrap(cleanLink.substring(linkFirstIndex)).as('downloadhmmm')
})
})
})
cy.get('#downloadhmmm').then((finalLink) => {
cy.get('#documentPassword').then((password) => {
const linkBody = {
username: testdata.credentials.username,
password: password,
downloadlink: finalLink,
}
cy.origin(Cypress.env('transferUrl'), { args: linkBody }, ({ username, password, downloadlink }) => {
cy.visit(downloadlink, {
auth: {
username: username,
password: password
}
})
// to prevent Cypress from loading indefinitely when downloading, only works in Chrome
cy.window().document().then(function (doc) {
doc.addEventListener('click', () => {
setTimeout(function () { doc.location.reload() }, 5000)
})
cy.get('#downloadButton').click({ force: true })
cy.wait(4000)
})
})
})
})
cy.get('span').contains('courses').invoke('text').then((title) => {
cy.wrap(title).as('initialDocumentTitle')
cy.get('#initialDocumentTitle').then((initialTitle) => {
var convertedTitle = initialTitle.replaceAll(':', "_")
cy.wrap(convertedTitle).as('downloadedDocumentTitle')
cy.wait(10000)
})
})
cy.get('#courseNameArray').then((courseNamesArray) => {
cy.log(courseNamesArray)
cy.get('#downloadedDocumentTitle').then((documentTitle) => {
//start of reading files from Excel
var removeSpace = documentTitle.replace(/\s/g, '')
var excelFilePath = "cypress/downloads/" + removeSpace
cy.verifyDownload(removeSpace, { interval: 600 })
cy.wrap(excelFilePath).as('filePath')
cy.get('#filePath').then((filePath) => {
cy.task('checkExcelSheetContents', { filePath }).then((contents) => {
cy.log(contents)
expect(contents).to.deep.equal(courseNamesArray)
})
})
})
})
I am doing API testing with Cypress and I want to have a prompt that asks for a value.
I use a function to try to get the value.
The commands: Alert and Confirm shows a popup windows, but Prompt (or window.prompt) does not work (nothing shows/no error message)
How can I get the Prompt to work?
My tests are:
Image:
Here is the code:
///
describe('Example to demonstrate handling of JavaScript Alerts, Confirm, Prompt in Cypress', () => {
console.clear()
it('get answer ', () => {
var answer = window.confirm("Would like to confirm?");
if (answer) {
console.log('YES')
}
else {
console.log('NO')
}
});
it('get answer ', () => {
var name = alert("Your name is Null");
console.log(name)
});
it('get answer ', () => {
var name = prompt("What is your name?");
console.log("Hi " + name)
});
})
In cypress, the xlsx file I am downloading always starts with lets say "ABC" and then some dynamic IDs. How can I verify if the file is downloaded successfully and also contains that dynamic name?
Secondly, what if the downloaded file is like "69d644353f126777.xlsx" then how can i verify that the file is downloaded when everything in the name is dynamic.
Thanks in advance.
One way that suggests itself is to query the downloads folder with a task,
/cypress/plugins/index.js
const fs = require('fs');
on('task', {
downloads: (downloadspath) => {
return fs.readdirSync(downloadspath)
}
})
test
cy.task('downloads', 'my/downloads/folder').then(before => {
// do the download
cy.task('downloads', 'my/downloads/folder').then(after => {
expect(after.length).to.be.eq(before.length +1)
})
})
If you can't direct the downloads to a folder local to the project, provide a full path. Node.js (i.e Cypress tasks) has full access to the file system.
To get the name of the new file, use a filter and take the first (and only) item in the result.
const newFile = after.filter(file => !before.includes(file))[0]
Maybe this will works but this also requires a filename to be assert.Write this code in index.js
on('task', {
isExistPDF(PDFfilename, ms = 4000) {
console.log(
`looking for PDF file in ${downloadDirectory}`,
PDFfilename,
ms
);
return hasPDF(PDFfilename, ms);
},
});
Now add custom command in support/commands.js
Cypress.Commands.add('isDownloaded', (selectorXPATH, fileName) => {
//click on button
cy.xpath(selectorXPATH).should('be.visible').click()
//verify downloaded file
cy.task('isExistPDF', fileName).should('equal', true)
})
Lastly write this code in your logic area
verifyDownloadedFile(fileName) {
//Clear downloads folder
cy.exec('rm cypress/downloads/*', {
log: true,
failOnNonZeroExit: false,
})
cy.isDownloaded(this.objectFactory.exportToExcelButton, fileName)
}
and call this function in your testcase
I ended up using something similar to #user14783414.
However I keep getting that the downloads' folder length was 0. I then added an cy.wait() which solved the issue.
cy.task('downloads', 'my/downloads/folder').then(before => {
// do the download
}).then(() => {
cy.wait(500).then(() => {
cy.task('downloads', 'my/downloads/folder').then(after => {
expect(after.length).to.be.eq(before.length +1)
})
})
})
})
Another approach is to leverage Nodes fs.watch(...) API and to define a plugin task which waits for a new download to be available and returns the filename:
/cypress/plugins/index.js
const fs = require('fs');
module.exports = (on, config) => {
on('task', {
getDownload: () => {
const downloadsFolder = config['downloadsFolder'];
return new Promise((resolve, reject) => {
const watcher = fs.watch(downloadsFolder, (eventType, filename) => {
if (eventType === 'rename' && !filename.endsWith('.crdownload')) {
resolve(filename);
watcher.close();
}
});
setTimeout(reject, config.taskTimeout); // Or another timeout if desired
});
},
});
};
And then it is fairly easily used within a test spec as follows:
/sometest.spec.js
it('downloads a file', () => {
cy.get(downloadButtonSelector).click();
cy.task('getDownload').then(fileName => {
// do something with your newly downloaded file!
console.log('Downloaded file:', fileName);
});
});
Now technically there may be a bit of a race condition if the file is downloaded extremely quickly and the file exists on disk before the watcher begins, but in my testing - even with relatively small files and fast network speed - I have never observed this.
For the solution of Nicholas, in firefox, the '.crdownload' doesn't exist so we need to add a condition on the '.part' :
if (eventType === 'rename' && !filename.endsWith('.crdownload') && !filename.endsWith('.part'))
Half an year a go I was using this gulpfile.js (shown below) and it worked flawlessly. Now, on windows 8.1 64bit I can't get it to properly work since hours. I'm using LiveReload in Firefox to see the changes in RealTime and Growl to get the notifications that it was changed.
The entire source code is:
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
exec = require('child_process').exec,
sys = require('sys'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
livereload = require('gulp-livereload'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
path = require('path'),
watch = require('gulp-watch'),
sass = require('gulp-sass');
// Which directory should Sass compile to?
var targetDir = 'resources/compiled';
// .pipe(minifyCSS())
gulp.task('scss', function () {
gulp.src('resources/uncompiled/**/*.scss')
.pipe(changed(targetDir))
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir));
//! .sass files -> compile, minify, autoprefix and publish
watch('resources/uncompiled/**/*.scss', function(files) {
return files.pipe(changed(targetDir))
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "SASS compiled, minified and published."
}));
});
});
gulp.task('js', function() {
gulp.src('resources/uncompiled/**/*.js')
.pipe(changed(targetDir))
.pipe(uglify())
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "JavaScript minified and published."
}));
//! .js files -> compress and publish
watch('resources/uncompiled/**/*.js', function(files) {
return files.pipe(changed(targetDir))
.pipe(uglify())
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(/assets\//g, "");
}))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "JavaScript minified and published."
}));
});
});
gulp.task('images', function() {
gulp.src(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'])
.pipe(changed(targetDir))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir));
//! image files -> compress and publish
watch(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'], function(files) {
return files.pipe(changed(targetDir))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(/assets\//g, "");
}))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "Image: <%= file.relative %>",
title: "Image optimized and published."
}));
});
});
gulp.task('watch', function () {
// Create LiveReload server
var server = livereload();
// Watch any files in public dir, reload on change
gulp.watch(['resources/compiled/**']).on('change', function(file) {
server.changed(file.path);
});
});
// What tasks does running gulp trigger?
gulp.task('default', ['scss', 'js','images', 'watch']);
Now, I noticed that I need to change these lines
gulp.watch(['resources/compiled/**']).on('change', function(file) {
server.changed(file.path);
});
to
livereload.listen();
gulp.watch('resources/uncompiled/**/*.scss', ['scss']);
to comply with ver3. of gulp (or gulp-notifications?) but it still didn't resolve it.
My issue is that currently I can't get the script to work like before, to notice changes in the main.sass and to compress that file to .css file and to also notice if i've placed images/js files and move them accordingly. The images part is not that important, but the SASS is. It should put it in /compiled/css or /compiled/images accordingly.
Every time I try to change and save the sass files, I get this:
path.js:146
throw new TypeError('Arguments to path.resolve must be strings');
^
TypeError: Arguments to path.resolve must be strings
at Object.win32.resolve (path.js:146:13)
at DestroyableTransform._transform (L:\xampp\htdocs\node_modules\gulp-changed\index.js:72:22)
at DestroyableTransform.Transform._read (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules
\readable-stream\lib\_stream_transform.js:172:10)
at DestroyableTransform.Transform._write (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_module
s\readable-stream\lib\_stream_transform.js:160:12)
at doWrite (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\readable-stream\lib\_stream_
writable.js:326:12)
at writeOrBuffer (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\readable-stream\lib\_s
tream_writable.js:312:5)
at DestroyableTransform.Writable.write (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\
readable-stream\lib\_stream_writable.js:239:11)
at DestroyableTransform.Writable.end (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\re
adable-stream\lib\_stream_writable.js:467:10)
at File.pipe (L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl\index.js:103:14)
at L:\xampp\htdocs\fusion\_designs\cms-design\gulpfile.js:33:22
at write (L:\xampp\htdocs\node_modules\gulp-watch\index.js:123:9)
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\index.js:52:4
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\node_modules\graceful-fs\graceful-fs.js:76:16
at fs.js:334:14
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\node_modules\graceful-fs\graceful-fs.js:42:10
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\chokidar\node_modules\readdirp\node_modules\graceful-fs\grace
ful-fs.js:42:10
Of course I tried to change the paths, tried to use directly paths in the functions instead of passing variables, but to no avail.
Any suggestions? I've been struggling for 4 hours now and I did manage to get it to work to some extend, but I had to remove a lot of the functionality and to restart gulp every time. I couldn't get the images to get "minified" as well.
Well, several days later and I solved my issue on my own.
First of all, I had to set a gulp.watch for each type. I changed the gulp.tasks to perform one thing only.
Now every .scss sass, .js javascript, .jpg/.png/.bmp image file gets checked for changes and if so, the needed task gets called, which on it's own then compiled/minifies/moves the respected file and fires a (growl) notification.
Since I'm on Windows 8.1 I do have OS notifications but I'd rather use Growl, hence the growlNotifications are used.
Full source code of my gulpfile.js:
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
exec = require('child_process').exec,
sys = require('sys'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
livereload = require('gulp-livereload'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
path = require('path'),
watch = require('gulp-watch'),
growl = require('gulp-notify-growl'),
sass = require('gulp-sass');
// Initialize the Growl notifier instead of the default OS notifications
// meaning, this: https://i.imgur.com/ikkINZr.png
// changes to this: https://i.imgur.com/zz9m9k6.png
var growlNotifier = growl({
hostname : 'localhost' // IP or Hostname to notify, default to localhost
});
// Which directory should the files compile to?
var targetDir = 'resources/compiled';
gulp.task('scss', function () {
gulp.src('resources/uncompiled/**/*.scss')
.pipe(changed(targetDir))
//.pipe(minifyCSS()) //makes it hard to debug , to be used for in-production only
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(growlNotifier({ // change to notify if you wish to use your default OS notifications
message: "File: <%= file.relative %>",
title: "SASS compiled, minified and published."
}))
.pipe(livereload()); //this is how we notify LiveReload for changes
});
gulp.task('js', function() {
//needs testing, but it should be OK
gulp.src('resources/uncompiled/**/*.js')
.pipe(changed(targetDir))
.pipe(uglify())
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "Javascript minified and published."
}))
.pipe(livereload());
});
gulp.task('images', function() {
gulp.src(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'])
.pipe(changed(targetDir))
//imagemin causes errors for me: http://pastebin.com/eDF3SeS6
//.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(growlNotifier({
message: "Image: <%= file.relative %>",
title: "Image optimized and published."
}))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen(); //we need to tell gulp to listen for livereload notification
//this is how we watch for changes in specific files and fire specific tasks
gulp.watch('resources/uncompiled/**/*.scss', ['scss']);
gulp.watch('resources/uncompiled/**/*.js', ['js']);
gulp.watch(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'], ['images']);
});
// What tasks does running gulp trigger?
gulp.task('default', ['scss', 'js','images', 'watch']);