Following is the code I am facing this error please help me solve this, i would be really graced to get clear answer ___
Everything runs smooth but except if I save the file, following error occurs
ERROR : Task 'sass' is not in your gulpfile
// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
cssmin = require('gulp-minify-css'),
rename = require("gulp-rename"),
sass = require('gulp-sass'),
browserSync = require('browser-sync'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
autoprefix = require('gulp-autoprefixer');
changed = require('gulp-changed'),
// scripts task
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/js/'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/js/'));
});
// styles task and autoprefix
gulp.task('styles', function() {
gulp.src(['./src/sass/*.scss'])
.pipe(autoprefix('last 2 versions'))
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./dist/css/'));
});
// browser sync
gulp.task('browser-sync', ['styles'], function() {
browserSync({
server: {
baseDir: ''
},
notify: false
});
gulp.watch("./src/sass/*.scss", ['scss']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
gulp.watch('./src/js/*.js', ['scripts']);
gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
var imgSrc = './src/img/**/*',
imgDst = './dist/img';
gulp.src(imgSrc)
.pipe(changed(imgDst))
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);
You do not have, indeed, defined "sass" task nor "scss" task thats marked as dependable under "browser-sync" file.
Try Replacing:
gulp.watch("./src/sass/*.scss", ['scss']);
with
gulp.watch("./src/sass/*.scss", ['styles']);
Related
I never encountered this issue before cause I worked with one-page websites. But now I have several pages, and when I created third file in 'build' folder, browsersync started to work not as expected.
Basically, browsersync now makes changes in browser only on second save. You can see this behavior on video: https://youtu.be/lNFEDZMBiQY
Here's my gulp setup:
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
sass = require('gulp-sass'),
pug = require('gulp-pug'),
concat = require('gulp-concat'),
//uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create()
// browserSync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'build',
directory: true
},
notify: false
})
})
// pug to html
gulp.task('pug', function buildHTML() {
return gulp.src('src/pug/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/'))
.pipe(browserSync.reload({
stream: true
}))
});
// scss to css
gulp.task('sass', function(){
return gulp.src('src/scss/style.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('build/css'))
.pipe(browserSync.reload({
stream: true
}))
});
// js concat and minify
gulp.task('scripts', function() {
return gulp.src(['src/js/jquery-3.0.0.min.js', 'src/js/jquery-migrate-1.4.1.min.js', 'src/js/swiper.min.js', 'src/js/jquery.photoswipe-global.js', 'src/js/custom.js'])
.pipe(concat('main.min.js'))
//.pipe(uglify())
.pipe(gulp.dest('build/js/'));
});
// watcher
gulp.task('watch', ['browserSync', 'sass', 'pug', 'scripts'], function(){
gulp.watch('src/scss/**/*.scss', ['sass']);
gulp.watch('src/pug/**/*.pug', ['pug']);
gulp.watch('src/js/**/*.js', ['scripts']);
// Other watchers
})
gulp.task('default', ['watch']);
Maybe, there's an error in this setup? How I can fix this issue?
I am quite a newbie for gulp but i am trying to implement it in my this project. But looks like somewhere i mashup. I order the js files and was trying to get the bundle. But looks like jquery lib or something is not working.
Here is my gulpfile.js code:
'use strict';
// include all necessary plugins in gulp file
var gulp = require('gulp');
var order = require('gulp-order');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Task defined for java scripts bundling and minifying
gulp.task('scripts', function() {
return gulp.src('assets/src/js/*.js')
.pipe(order([
"assets/src/js/jquery-3.2.1.slim.min.js",
"assets/src/popper.min.js",
"assets/src/js/bootstrap.min.js",
"assets/src/js/morphext.min.js",
"assets/src/js/pushy.min.js",
"assets/src/quote.js"
], { base: './' }))
.pipe(concat('bundle.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js'));
});
// Task define for compliling scss file
// Currently i am not using this complier
gulp.task('sass', function() {
return gulp.src('assets/src/css/**/*.scss', {style: 'compressed'})
.pipe(rename({suffix: '.min'}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('assets/dist/css/'));
});
// Define task to optimize images in project
gulp.task('images', function() {
return gulp.src('assets/src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/dist//img'));
});
// Task watch
gulp.task('watch', function() {
// Watch .js files
gulp.watch('assets/src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('assets/src/css/*.scss', ['sass']);
// Watch image files
gulp.watch('assets/src/img/**/*', ['images']);
});
// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'watch']);
I got solution for this problem, here is my new code for gulp.js!
'use strict';
// include all necessary plugins in gulp file
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
// Task defined for java scripts bundling and minifying
gulp.task('scripts', function() {
return gulp.src
([
'assets/src/js/jquery/*.js',
'assets/src/js/vendor/*.js',
'assets/src/js/plugins/*.js',
'assets/src/js/custom/*.js',
])
.pipe(concat('bundle.js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('assets/dist/js/'));
});
// Task define for compliling scss file
gulp.task('sass', function() {
return gulp.src('assets/src/scss/**/*.scss', {style: 'compressed'})
.pipe(rename({suffix: 'custom'}))
.pipe(sourcemaps.init()) // Process the original sources
.pipe(sass())
.pipe(sourcemaps.write()) // Add the map to modified source.
.pipe(gulp.dest('assets/dist/css/unminified/'));
});
// Define task to optimize images in project
gulp.task('images', function() {
return gulp.src('assets/src/img/**/*')
.pipe(cache(imagemin({ optimizationLevel:5, progressive: true, interlaced: true })))
.pipe(gulp.dest('assets/dist/img'));
});
// Task watch
gulp.task('watch', function() {
// Watch .js files
gulp.watch('assets/src/js/*.js', ['scripts']);
// Watch .scss files
gulp.watch('assets/src/scss/*.scss', ['sass']);
// Watch image files
gulp.watch('assets/src/img/**/*', ['images']);
});
// declaring final task and command tasker
// just hit the command "gulp" it will run the following tasks...
gulp.task('default', ['scripts', 'images' , 'sass' , 'watch']);
My command line shows following error while i entered the gulp watch command. Since gulp is searching css files from inside the app directory instead of searching it from bower_components.I have tried using minify-css as well as copy-css.Both are not working.
events.js:160
throw er; // Unhandled 'error' event
^
Error: Path F:\Backup Folder\coursera-project\Full stack course\Angular Js\Assignments\week1\confusion\app\bower_components\bootstrap\dist\css\bootstrap.min.css not found!
My gulpfile.js file
'use strict';
var gulp = require('gulp'),
cleancss = require('gulp-clean-css'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
usemin = require('gulp-usemin'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
changed = require('gulp-changed'),
rev = require('gulp-rev'),
browserSync = require('browser-sync'),
del = require('del'),
ngannotate = require('gulp-ng-annotate');
gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
// Clean
gulp.task('clean', function() {
return del(['dist']);
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('usemin', 'imagemin','copyfonts');
});
gulp.task('usemin',['jshint'], function () {
return gulp.src('./app/**/*.html')
.pipe(usemin({
css:[cleancss(),rev()],
js: [ngannotate(),uglify(),rev()]
}))
.pipe(gulp.dest('dist/'))
});
// Images
gulp.task('imagemin', function() {
return del(['dist/images']), gulp.src('app/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
gulp.task('copyfonts', ['clean'], function() {
gulp.src('./bower_components/font-awesome/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
gulp.src('./bower_components/bootstrap/dist/fonts/**/*.{ttf,woff,eof,svg}*')
.pipe(gulp.dest('./dist/fonts'));
});
// Watch
gulp.task('watch', ['browser-sync'], function() {
// Watch .js files
gulp.watch('{app/scripts/**/*.js,app/styles/**/*.css,app/**/*.html}', ['usemin']);
// Watch image files
gulp.watch('app/images/**/*', ['imagemin']);
});
gulp.task('browser-sync', ['default'], function () {
var files = [
'app/**/*.html',
'app/styles/**/*.css',
'app/images/**/*.png',
'app/scripts/**/*.js',
'dist/**/*'
];
browserSync.init(files, {
server: {
baseDir: "dist",
index: "index.html"
}
});
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', browserSync.reload);
});
I am also not able to copy html files to my dist folder.
Can't figure out why gulp-concat doesn't work correctly. When i try to compile my javascript it doesn't give me the output file. All the paths are correct. I tried to remove .pipe(concat()) and the .js file appeared in the correct folder. But the same code with concat() doesn't work.
var gulp = require('gulp'),
sass = require('gulp-sass'),
jade = require('gulp-jade-php'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cssmin = require('gulp-cssmin'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-autoprefixer');
var path = {
src: {
styles: 'git/**/*.scss',
scripts: 'git/**/scripts/*.js',
jade: 'git/**/*.jade'
},
publicPath: "../",
npm: {
jquery: 'bower_components/jquery/dist/jquery.min.js',
bootstrap: 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js',
swiper: 'bower_components/swiper/dist/js/swiper.jquery.min.js'
},
watch: {
styles: 'git/**/*.scss',
scripts: 'git/**/*.js',
jade: 'git/**/*.jade'
}
};
var scriptPaths = [path.src.scripts, path.npm.jquery, path.npm.bootstrap, path.npm.swiper];
// Scripts //
gulp.task('scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
gulp.task('build:scripts', function () {
return gulp.src(scriptPaths)
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(notify({
message: 'Javascript Success'
}))
.pipe(gulp.dest(path.publicPath))
});
// Watch //
gulp.task('watch', function () {
gulp.watch(path.watch.styles, ['styles']);
gulp.watch(path.watch.scripts, ['scripts']);
gulp.watch(path.watch.jade, ['html']);
});
gulp.task('default', ['styles', 'scripts', 'html']);
gulp.task('build', ['build:styles', 'build:scripts', 'html']);
Do you have any ideas why it doesn't work. I tried to remove node_modules and installed it again, but it didn't help
Hello guys i am trying to run parallel tasks but my code does not work.
var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var imagemin = require('gulp-imagemin');
gulp.task('sass', function(){
return gulp.src('app/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dist/css'));
}),
gulp.task('scripts', function(){
return gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
}),
gulp.task('images', function(){
return gulp.src('app/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'));
}),
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss', 'sass');
gulp.watch('app/js/*js', 'scripts');
gulpt.watch('app/img/*', 'images');
}),
gulp.task('default', ['sass', 'scripts', 'images', 'watch']);
Tahnks you
When watching files using gulp.watch, the second parameter should be an array of strings, not a single string.
Also there is a typo where you spelled gulpt instead of gulp.
The following works just fine:
gulp.task('watch', function(){
gulp.watch('app/scss/*.scss', ['sass']);
gulp.watch('app/js/*js', ['scripts']);
gulp.watch('app/img/*', ['images']);
}),