This is a project I brought from the internet, I think this used laravel framework and compressed using Gulp. It's working fine. But I need to modify js files in it.
Here is project structure:
[![enter image description here][2]][2]
Here is my gulpfile.js:
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-minify-css');
var path = require('path');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var ngAnnotate = require('gulp-ng-annotate');
var browserSync = require('browser-sync');
var autoprefixer = require('gulp-autoprefixer');
var reload = browserSync.reload;
var minifyHTML = require('gulp-minify-html');
var angularTemplateCache = require('gulp-angular-templatecache');
var addStream = require('add-stream');
function prepareTemplates() {
return gulp.src([
'assets/views/directives/*.html'
])
.pipe(minifyHTML())
.pipe(angularTemplateCache({
module: 'app',
root: 'assets/views/directives'
}));
}
gulp.task('sass', function () {
gulp.src('./application/resources/sass/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(rename('styles.min.css'))
.pipe(gulp.dest('./assets/css'))
.pipe(gulp.dest('./assets/css/custom-stylesheets/original'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('scripts.core', function() {
return gulp.src([
'application/resources/js/vendor/angular.js',
'application/resources/js/vendor/angular-ui-router.js',
'application/resources/js/vendor/angular-translate.js',
'application/resources/js/vendor/*.js',
'application/resources/js/core/app.js',
'application/resources/js/core/routes.js',
'application/resources/js/core/acl.js',
'application/resources/js/**/*.js',
])
.pipe(addStream.obj(prepareTemplates()))
.pipe(concat('core.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('minify', function() {
gulp.src('assets/js/core.min.js').pipe(ngAnnotate()).pipe(uglify()).pipe(gulp.dest('assets/js'));
gulp.src('assets/css/styles.min.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false,
remove: false
}))
.pipe(minifyCSS({compatibility: 'ie10'}))
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('assets/css/custom-stylesheets/original'));
});
// Watch Files For Changes
gulp.task('watch', function() {
browserSync({
proxy: "localhost/bemusic/bemusic_6"
});
gulp.watch('application/resources/js/**/*.js', ['scripts.core']);
gulp.watch('application/resources/sass/**/*.scss', ['sass']);
});
// Default Task
gulp.task('default', ['watch']);
After I edit some JS files, and run "gulp scripts.core" in terminal (to re compile) it give me this error
enter image description here
Related
my gulp watch keeps on a rebuild after saving js file, the Scss file working well, the problem is when saving other files inside the project folder, changing or replacing images, triggers the rebuild to start and finish building dist folder.
only while saving Scss files, the build starts and finishes as accepted.
terminal output:
[17:53:11] Starting 'js-build'...
[17:53:11] Finished 'js-build' after 452 ms
[17:53:11] Starting 'js-build'...
[17:53:12] Finished 'js-build' after 614 ms
[17:53:12] Starting 'js-build'...
please advice?
my gulp code:
var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
babel = require('gulp-babel');
uglify = require('gulp-uglify-es').default,
cssnano = require('gulp-cssnano'),
plumber = require('gulp-plumber'),
gcmq = require('gulp-group-css-media-queries'),
rename = require('gulp-rename'),
pngquant = require('imagemin-pngquant'),
cache = require('gulp-cache'),
concat = require('gulp-concat'),
del = require('del'),
sass = require('gulp-sass'),
scss = require('gulp-scss'),
browserSync = require('browser-sync'),
server = browserSync.create(),
fileinclude = require('gulp-file-include');
function reload(done) {
server.reload();
done();
}
function serve(done) {
server.init({
server: {
baseDir: './dist'
}
});
done();
}
gulp.task('html', function() {
return gulp.src('*.html')
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('dist'))
});
var scssFiles = [
'./scss/**/*.scss',
'!./node_modules/**',
'!./dist/**',
];
var jsFiles = [
'**/*.js',
'!./node_modules/**',
'!gulpfile.js',
'!./dist/**',
];
var imgFiles = [
'**/*.{jpg,png,jpeg,svg,gif,ico}',
'!./node_modules/**',
'!./dist/**',
];
var fontFiles = [
'fonts/**/*.*',
'!./node_modules/**',
'!./dist/**',
];
gulp.task('scss', function() {
var postCSSplugins = [
autoprefixer({ browsers: ['last 2 version'] }),
];
return gulp.src(scssFiles)
.pipe(sass())
// .pipe(concat('app.css'))
.pipe(plumber()) //if need unoptimezed file - comment this line
.pipe(gcmq()) //if need unoptimezed file - comment this line
.pipe(cssnano()) //if need unoptimezed file - comment this line
.pipe(gulp.dest('dist/css/'))
.pipe(server.stream()) //if need unoptimezed file - comment this line
});
gulp.task('js-build', function () {
return gulp.src(jsFiles)
.pipe(plumber())
.pipe(babel({
presets: ['#babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/'))
});
gulp.task('img', function() {
return gulp.src(imgFiles)
.pipe(gulp.dest('dist/'))
});
gulp.task('font', function() {
return gulp.src(fontFiles)
.pipe(gulp.dest('dist/fonts'))
});
gulp.task('watch', function() {
gulp.watch(scssFiles, gulp.series('scss'), reload);
gulp.watch('*.html', gulp.series('html'));
gulp.watch(jsFiles, gulp.series('js-build'));
gulp.watch(imgFiles, gulp.series('img'));
});
gulp.task('clean', function() {
return del('./dist');
});
gulp.task('build', gulp.parallel('scss', 'html', 'js-build', 'img', 'font'));
gulp.task('serve', gulp.parallel('watch', serve));
gulp.task('default', gulp.series('clean', 'build', 'serve'));
When calling gulp the site and its assets are generated correctly once. The watch tasks start, but they never register new changes nor refresh the browser with Browsersync.
My goal is to have a full automation in the build process. For example, if _config.yml changes Jekyll will rebuild itself. Same idea applies to every file.
What I have tried so far:
Creating separate gulp.watch tasks for build:scripts, build:styles, build:images and build:jekyll.
Calling .on('change', browserSync.reload) on every separate gulp.watch task
Creating .pipe(browserSync.reload({stream: true})) in build:styles, build:images, build:scripts and build:jekyll
Here are the contents of gulpfile.js:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream());
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'))
.pipe(browserSync.stream());
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand))
browserSync.reload();
callback();
});
gulp.task('clean', function() {
return del(['_site', 'assets']);
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('watch', ['build'], function() {
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['build']).on('change', browserSync.reload);
});
gulp.task('default', ['watch']);
Why would Browsersync and Jekyll register the changes correctly?
I have managed to get Browsersync see all the changes in the needed files and reload browser with the following gulpfile.js tasks:
'use strict';
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var del = require('del');
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var run = require('gulp-run');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
gulp.task('clean', function() {
return del(['_site', '.publish', 'assets']);
});
gulp.task('build:scripts', function() {
return gulp.src('_assets/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest('assets/js'));
});
gulp.task('build:styles', function() {
return gulp.src('_assets/styles/main.sass')
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
browsers: ['last 4 versions']
}))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('assets/styles'));
});
gulp.task('build:images', function() {
return gulp.src('_assets/img')
.pipe(imagemin())
.pipe(gulp.dest('assets/img'));
});
gulp.task('build:jekyll', function(callback) {
// --incremental regeneration doesn't update front matter
var shellCommand = 'jekyll build';
return gulp.src('')
.pipe(run(shellCommand));
callback();
});
gulp.task('build', function(callback) {
return runSequence('clean', ['build:scripts', 'build:styles', 'build:images'], 'build:jekyll', callback)
});
gulp.task('rebuild', ['build'], function(){
browserSync.reload();
});
gulp.task('default', ['build'], function() {
// maybe important (injectChanges: true)
browserSync.init({
server: {
baseDir: '_site'
},
open: true
});
gulp.watch(['_config.yml' ,
'*.html', '_layouts/*.*',
'_pages/*.*', '_assets/**/**/*.*'],
['rebuild']);
});
I have been struggling for a while now and it is fairly frustrating to be honest.
The problem:
I created a gulpfile for my static website, and all i want to do is use browserSync, to compile sass into css and to minify the script and css files. Everything works fine, excluding one thing:
When I run "gulp" everything loads, besides de css file, which is located in "CSS/". Apparently the server thinks that the css file is ("CSS/style.css/") a folder actually.
Screenshot with the console error:
image
the css file is located in "css/style.css"
"use strict";
let paths = {
script: "js/*.js",
minifiedScript: 'script.min.js',
cssPath: "css/*.css",
productionFolder: "production",
sassPath: "scss/*.scss",
htmlFiles: "*.html"
};
const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');
const browserSync = require('browser-sync').create();
const cssMin = require('gulp-css');
const sass = require('gulp-sass');
const inject = require('gulp-inject');
const rename = require("gulp-rename");
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function () {
return gulp.src(paths.sassPath)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});
gulp.task('index', function () {
var target = gulp.src('index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src([paths.script,paths.cssPath], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest(''));
});
gulp.task('cssMinify', function(){
return gulp.src(paths.cssPath)
.pipe(cssMin())
.pipe(gulp.dest(paths.productionFolder + "/minified css"))
.pipe(browserSync.stream());
});
gulp.task('clean', function() {
// You can use multiple globbing patterns as you would with `gulp.src`
return del(['build']);
});
gulp.task('scripts', ['clean'], function() {
// Minify and copy the JS file
return gulp.src(paths.script)
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat(paths.minifiedScript))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.productionFolder + "/minified JS"));
});
gulp.task('jsMinify:watch', function() { gulp.watch(paths.script, ['scripts']) });
gulp.task('sass:watch', function() { gulp.watch(paths.sassPath, ['sass']) });
gulp.task('cssMinify:watch', function() { gulp.watch(paths.cssPath, ['cssMinify']) });
gulp.task('html:watch', function() { gulp.watch(paths.htmlFiles).on('change', browserSync.reload) });
gulp.task('default', ['sass', 'index', 'cssMinify', 'clean', 'html:watch', 'jsMinify:watch', 'sass:watch', 'cssMinify:watch','browserSync', 'scripts']); // DEVELOPMENT
Here is the snapshot of command prompt when I run gulp. Previously it used to work correctly but now, it is showing some weird errors.
my view folder is supposed to contain only templates, so why is it displaying bootstrap.social.css not found?
and my project folder looks like-
Project-
app-
fonts-...
images-...
scripts-
app.js
controllers.js
services.js
styles-...
index.html
views-
various html templates
bower_components-...
dist-..
node_modules-...
gulpfile.js
package.json
...
here is my gulpfile.js' code:
var gulp = require('gulp'),
minifycss = require('gulp-minify-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'),
ngannotate = require('gulp-ng-annotate'),
del = require('del');
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:[minifycss(),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 have the following gulpfile
var gulp = require('gulp');
var clean = require('gulp-clean');
var rename = require('gulp-rename');
var coffee = require('gulp-coffee');
var cache = require('gulp-cached');
var path = require('path');
var dist = './Test/public/';
var assets = './Test/assets/';
var paths = {
coffee: ['./**/*.coffee']
};
var coffeeTask = function () {
console.log('coffeeTask');
return gulp.src(paths.coffee, { cwd: assets + '**' })
.pipe(cache('coffee'))
.pipe(coffee({ bare: true }))
.pipe(rename({
extname: ".coffee.js"
}))
.pipe(gulp.dest(dist));
};
gulp.task('clean', function() {
return gulp.src(dist)
.pipe(clean());
});
gulp.task('coffee', ['clean'], coffeeTask);
gulp.task('coffee-watch', coffeeTask);
gulp.task('build', ['clean', 'coffee']);
gulp.task('watch', ['build'], function() {
var w = gulp.watch(paths.coffee, ['coffee-watch']);
w.on('change', function(evt) {
console.log(evt);
});
});
gulp.task('default', ['build']);
The key point of this configuration is use the same tasks for deploy and watch processes (read "build" and "watch" tasks).
The problem is that watch task doesn't catche any new coffee files. Edited or removed coffee files are processed well. According the following issue it should works. What the reason is?
Solved by using gulp-watch module:
watch(paths.coffee, function(evt) {
gulp.start('coffee-watch');
});
The question no is how to remove in dist folder deleted file in assets folder?