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
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?
My goal is to compile and minify a few CSS and JS files, and one HTML file into a new HTML file which should have this kind of structure:
<script>
... compiled JS files ...
</script>
<style>
... minified CSS files ...
</style>
<html file>
This is my file structure:
This is my gulpfile:
const gulp = require('gulp');
const plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var csslint = require('gulp-csslint');
var cssComb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css');
var jshint = require('gulp-jshint'); // removed
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyHtml = require('gulp-minify-html');
const babel = require('gulp-babel');
const inject = require('gulp-inject-string');
const gulpMerge = require('gulp-merge');
const del = require('del');
const runSequence = require('gulp-sequence');
gulp.task('clean', function () {
return del([
'dist/**/*',
]);
});
gulp.task('css', function () {
gulp.src(['src/**/*.css'])
.pipe(plumber())
.pipe(cssComb())
.pipe(csslint())
.pipe(csslint.formatter())
.pipe(concat('bundle.css'))
.pipe(gulp.dest('dist/'))
.pipe(rename({
suffix: '.min'
}))
.pipe(cleanCss())
.pipe(gulp.dest('dist/'))
});
gulp.task('js', function () {
gulp.src(['src/js/**/*.js'])
.pipe(concat('bundle.js'))
.pipe(babel({
presets: 'env'
}))
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(gulp.dest('dist/'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('html', function () {
gulp.src(['src/html/**/*.html'])
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifyHtml())
.pipe(gulp.dest('dist/'))
});
gulp.task('concatenateFiles', function() {
return gulpMerge(
gulp.src('dist/bundle.css')
.pipe(inject.wrap("\n<style>\n", "\n</style>\n")),
gulp.src('dist/bundle.js')
.pipe(inject.wrap("\n<script>\n", "\n</script>\n\n")),
gulp.src('src/html/player.html')
)
.pipe(concat('widget.html'))
.pipe(gulp.dest('dist/'));
});
gulp.task('concatenateFilesMinified', function() {
return gulpMerge(
gulp.src('dist/bundle.min.css')
.pipe(inject.wrap('<style>', '</style>')),
gulp.src('dist/bundle.min.js')
.pipe(inject.wrap('<script>', '</script>')),
gulp.src('dist/player.min.html')
)
.pipe(concat('widget.min.html'))
.pipe(gulp.dest('dist/'));
});
const js = 'src/**/*.js';
const css = 'src/**/*.css';
const html = 'src/**/*.html';
const all = [js, css, html];
gulp.task('default', ['clean', 'js', 'css', 'html'], function () {
gulp.watch(js, ['js']);
gulp.watch(css, ['css']);
gulp.watch(html, ['html']);
setTimeout(function() {
runSequence(['concatenateFiles', 'concatenateFilesMinified']);
}, 2000);
});
I know this is a bad approach, especially if you look at the setTimeout(), but I'm just so lost at this point (and this is my first gulpfile).
I've also tried this:
gulp.task('default', ['clean', 'js', 'css', 'html', 'concatenateFiles', 'concatenateFilesMinified'], function () {
gulp.watch(js, ['js']);
gulp.watch(css, ['css']);
gulp.watch(html, ['html']);
});
But the problem is that all dependency tasks are executed in parallel, so the 'concatenateFiles' and 'concatenateFilesMinified' are started before their dependencies (eg JS, CSS and HTML) are ready.
Furthermore, gulp.watch() would only work for js, css and html tasks.
How do I do this properly?
TLDR:
I want to:
build CSS, JS and HTML files from src folder (1 file for each type)
concatenate those three files into one file (wrapping JS into <script>, CSS into <style>) into dist/widget.html
minify the file from step 2. into dist/widget.min.html
I want these 3 things to happen when I run gulp default.
Furthermore, I also want files from step 2. and 3. to be refreshed every time I make changes to files in src/ folder
runSequence should work with tasks, which are returning something. Add 'return' for js, html, concatenateFiles, concatenateFilesMinified
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']);
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.
I have a gulp file, and when I run it only the JavaScript files get complied and the less files doesn't get compiled, and I cannot seem to understand why is this happening.
This is my gulp file:
'use strict';
var path = require('path');
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var livereload = require('gulp-livereload');
var jsFiles = ['*.js', 'src/**/*.js'];
// js hints
gulp.task('hints', function(){
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', {
verbose: true
}))
.pipe(jscs()); });
// less
gulp.task('less', function () {
return gulp.src('./public/src/less/main.less')
.pipe(less({ paths: [path.join(__dirname, 'less', 'includes')] }))
.pipe(gulp.dest('./public/src/less/css')); });
// concat
gulp.task('concat', ['concat:css', 'concat:js']); gulp.task('concat:css', function() {
return gulp.src([
'public/lib/bower_components/bootstrap/dist/css/bootstrap.min.css',
'public/lib/bower_components/swiper/dist/css/swiper.min.css',
'public/lib/bower_components/font-awesome/css/font-awesome.min.css',
'public/src/less/css/main.css'
])
.pipe(concat('styles.css'))
.pipe(gulp.dest('./public/build/')); }); gulp.task('concat:js', function() {
return gulp.src([
'public/lib/bower_components/jquery/dist/jquery.min.js',
'public/lib/bower_components/bootstrap/dist/js/bootstrap.min.js',
'public/lib/bower_components/swiper/dist/js/swiper.min.js',
'public/lib/bower_components/jquery.scrollTo/jquery.scrollTo.min.js',
'public/lib/bower_components/jquery.localScroll/jquery.localScroll.min.js',
'public/lib/bower_components/jquery-waypoints/lib/jquery.waypoints.min.js',
'public/lib/bower_components/gsap/src/uncompressed/TweenMax.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js',
'public/lib/bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js',
'public/src/js/init.js',
'public/src/js/utils.js',
'public/src/js/main.js'
])
.pipe(concat('scripts.js'))
.pipe(gulp.dest('./public/build/')); });
// watch
gulp.task('watch', ['watch:css', 'watch:js']);
gulp.task('watch:css', function () {
gulp.watch('public/src/less/*.less', ['less', 'concat:css']);
});
gulp.task('watch:js', function () {
gulp.watch('public/src/js/*.js', ['concat:js', 'hints']);
});
gulp.task('build', [ 'less', 'concat']);
gulp.task('development', [ 'less', 'concat', 'watch']);
When I run gulp development the css and js file gets created under the build folder but because the less files dont get compiled to css the css file under build folder has none of my styles.
Does someone know how to solve this issue?
Thank you