I am writing a gulp script for the first time and I am having hard time being able to uglify my JS files based on gulp-if, I actually do think my code is correct :
var gulp = require('gulp');
var gutil = require('gulp-util');
var gulpif = require('gulp-if');
var concat = require('gulp-concat');
var del = require('del');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');
var watch = require("gulp-watch");
var argv = require('yargs').argv;
var paths = {
styles: ['css/maaap.css'],
stylesUfe: ['css/ufe.css'],
scripts: ['js/lang.js', 'js/bootstrap.js', 'js/jquery.js', 'js/leaflet.js', 'js/emm.js', 'js/markercluster.js', 'js/moment.js', 'js/geolocate.js'],
scriptsUfe: ['js/ufe.js', 'js/exif.js', 'js/binaryajax.js', 'js/canvasResize.js']
};
// Not all tasks need to use streams
// A gulpfile is just another node program and you can use all packages available on npm
gulp.task('clean', function(cb) {
console.log(cb);
del(['build'], cb);
});
// Merge all the css files from paths.styles then move it to build/css/style.css
// If you append --ufe you also merge the files from paths.stylesUfe
// If you append --prod your file become build/css/style.min.css and is compressed
gulp.task('styles', ['clean'], function() {
var source = (!argv.ufe) ? paths.styles : paths.styles.concat(paths.stylesUfe);
return gulp.src(source)
.pipe(concat('style.min.css'))
.pipe(gulpif(argv.prod, minifyCSS()))
.pipe(gulp.dest('build/css'));
});
// Merge all the css js files from paths.scripts then move it to build/js/livemap.js
// If you append --ufe you also merge the files from paths.scriptsUfe
// If you append --prof your file become build/js/livemap.min.js and is compressed
gulp.task('scripts', function() {
var source = (!argv.ufe) ? paths.scripts : paths.scripts.concat(paths.scriptsUfe);
return gulp.src(source)
.pipe(concat('livemap.min.js'))
.pipe(gulpif(argv.prod, uglify()))
.pipe(gulp.dest('build/js'))
});
gulp.task('watch', function() {
watch({glob: 'js/**/*.js'}, function (files) {
gulp.start('scripts'); // run the compile task
});
watch({glob: 'css/*.css'}, function (files) {
gulp.start('styles'); // run the compile task
});
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['scripts', 'styles']);
The error logs I got in my console are very strange to me :
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error
at new JS_Parse_Error (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:189:18)
at js_error (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:197:11)
at croak (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:656:9)
at token_error (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:664:9)
at unexpected (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:670:9)
at expr_atom (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1154:13)
at maybe_unary (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1327:19)
at expr_op (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1349:33)
at expr_ops (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1362:16)
at maybe_conditional (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1367:20)
at maybe_assign (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1391:20)
at expression (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1410:20)
at expr_list (/home/soueuls/Projects/MAAAP/node_modules/gulp-uglify/node_modules/uglify-js/lib/parse.js:1177:24)
Any ideas ?
Related
I want to compile my typescript and scss files with gulp. Unfortunately, it seems that gulp-sass do not support sass' #use statement. So I tried to use the sass package (this is not the gulp-sass package). Now my issue is that it seems that I cannot use sass in combination with gulp.
This error is thrown:
NoSuchMethodError: method not found: 'call'
Receiver: Closure '_render'
Link (Sass):
https://www.npmjs.com/package/sass
My setup:
var gulp = require('gulp');
var gulp_rename = require('gulp-rename');
var gulp_sass = require('gulp-sass'); // ---------> Should not be used
var gulp_autoprefixer = require('gulp-autoprefixer');
var gulp_sourcemaps = require('gulp-sourcemaps');
var gulp_ts = require('gulp-typescript');
var gulp_uglify = require('gulp-uglify-es').default;
var gulp_concat = require("gulp-concat");
var sass = require('sass');
var glob = require('glob');
const filePaths = {
styleSrc: 'src/sass/utility.scss',
styleDist: './dist/css/',
styleWatch: 'src/sass/**/*.scss',
}
gulp.task('build-sass', () => {
jsFiles.map(
function (entry) {
return gulp.src(filePaths.styleSrc)
.pipe(sass.render(entry))
.pipe(gulp.dest(filePaths.styleDist))
}
);
});
I'm using gulp and I trying to create a gulp task that combine files in a javascript file.
For example, image I have this:
File template\template1.html :
<h2>some html content</h2>
<p>blah blah blah</p>
File template\template2.html :
<h2>some other html content</h2>
<img src='cat.png'>
I'd like to read and merge these files into a single javascript file like this :
const templates = {
"template1" : "<h2>some html content</h2>\n<p>blah blah blah</p>",
"template2" : "<h2>some other html content</h2>\n<img src='cat.png'>"
}
export default templates
However, I'm failing when dealing with gulp plumbing (I'm quite new to gulp I admit).
How to reach my goal ?
Right now I tried to play with gulp-trough, but it fails at execution:
const gulp = require('gulp');
const through = require('gulp-through');
gulp.task('templates', function () {
var result = {}
gulp.src('src/templates/**/*.html')
.pipe(through('readFile', function(){
console.log(arguments); // not reached!
}, defaults));
})
gulp.task('default', ['templates'])
It shouldn't be hard to write your own plugin using through2 module (as explained in official docs.)
// gulpfile.js
const gulp = require('gulp');
const path = require('path');
const through = require('through2'); // npm install --save-dev through2
const toTemplateModule = obj => {
return [
`const template = ${JSON.stringify(obj, null, 2)};`,
'',
'export default template;'
].join('\n');
};
const mergeTemplate = file => {
const results = {};
let latestFile;
return through.obj(
function(file, encoding, callback) {
latestFile = file;
results[path.basename(file.path)] = file.contents.toString(encoding);
callback(null, file);
},
function(callback) {
const joinedFile = latestFile.clone({
contents: false
});
joinedFile.path = path.join(latestFile.base, file);
joinedFile.contents = Buffer.from(toTemplateModule(results), 'utf-8');
this.push(joinedFile);
callback();
});
};
gulp.task('templates', () => {
return gulp
.src('./src/templates/**/*.html')
.pipe(mergeTemplate('templates.js'))
.pipe(gulp.dest('./build'))
});
gulp.task('default', ['templates'])
There is a task 'serve' with watch functions as shown below:
gulp.task('serve', function() {
gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
gulp.watch(['app/static/*.html'], [reload]);
});
When I update js or css files gulp executes only concatjs or concatcss tasks correspondingly. But if to update the html file gulp executes all tasks even the tasks that wasn't registered to the watch function and it throws an error:
[18:26:31] Starting 'lesstocss'...
[18:26:31] Starting 'concatjs'...
[18:26:31] Starting 'concatcss'...
[18:26:31] Starting 'serve'...
[error] You tried to start Browsersync twice! To create multiple instances, use browserSync.create().init()
[18:26:31] Finished 'serve' after 6.1 ms
[18:26:31] Finished 'lesstocss' after 38 ms
[18:26:31] Finished 'concatjs' after 47 ms
[18:26:31] Finished 'concatcss' after 41 ms
Maybe gulp works with the html files in another way? All code I use:
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('lesstocss', function () {
return gulp.src('source/styles/*.less')
.pipe(sourcemaps.init())
.pipe(less())
.pipe(sourcemaps.write())
.pipe(gulp.dest('source/styles/'));
});
gulp.task('concatjs', function() {
return gulp.src(['source/scripts/mls.js', 'source/scripts/main.js'])
.pipe(concat('result.js'))
.pipe(gulp.dest('app/static/scripts/'));
});
gulp.task('concatcss', function() {
return gulp.src(['source/styles/mls.css', 'source/styles/main.css'])
.pipe(concat('result.css'))
.pipe(gulp.dest('app/static/styles/'));
})
gulp.task('serve', function() {
browserSync.init({
proxy: "localhost:3000",
browser: "google chrome",
notify: false,
open: 'local'
});
gulp.watch(['source/scripts/*.js'], ['concatjs', reload]);
gulp.watch(['source/styles/*.css'], ['concatcss', reload]);
gulp.watch(['app/static/*.html'], [reload]);
});
var gulp = require("gulp");
var changedInPlace = require("gulp-changed-in-place");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var rename = require("gulp-rename");
var autoprefixer = require("gulp-autoprefixer");
var cleanCSS = require("gulp-clean-css");
// var sourcemaps = require("gulp-sourcemaps");
// var runSequence = require("run-sequence");
// Static Server + watching scss/html files
gulp.task("browsersync", ["sass"], function() {
browserSync.init({
server: {
baseDir: "./",
index: "home.html"
},
ghostMode: false
});
gulp.watch("./scss/*.scss", ["sass"]);
gulp.watch("./*.html").on("change", browserSync.reload);
gulp.watch("./js/*.js").on("change", browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task("sass", function() {
return gulp.src("./scss/*.scss")
.pipe(changedInPlace())
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
At this point I thought it would be instructive to show my working gulpfile.js. It uses sass but you can swap that. Note it uses the preferred
var browserSync = require("browser-sync").create();
and avoids the unusual and possibly problematic arrays you have in your watch statements. But if you really have 2 'serve' tasks defined that is probably your problem (see my comment below)
I am not sure the following line is valid syntax:
gulp.watch(['app/static/*.html'], [reload]);
gulp.watch(glob[, opts], tasks) : when used this way - as you are doing - tasks is an array of STRINGS which themselves are created by gulp.task(). See the docs
Names of task(s) to run when a file changes, added with gulp.task()
from https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob--opts-tasks-or-gulpwatchglob--opts-cb
We definitely need to see reload and the rest of your gulpfile.js
Here is sample code which works with browserSync reload for example:
gulp.watch("./scss/*.scss", ["scss-watch"]);
gulp.watch("./*.html").on("change", browserSync.reload);
// gulp.watch("./css/*.css").on("change", browserSync.reload);
gulp.watch("./js/*.js").on("change", browserSync.reload);
I currently am using Gulp to run various tasks, which includes compiling and minifying SASS (I am also utilizing Gulp Watch). I am having the issue where when I make changes to a file (specifically app.scss), It spits out a rather uninformative error:
"C:\Program Files (x86)\JetBrains\PhpStorm 2016.1\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" C:\Users\Matthew\PhpstormProjects\mattrick\node_modules\gulp\bin\gulp.js --color --gulpfile c:\Users\Matthew\PhpstormProjects\website\gulpfile.js watch
[20:48:35] Using gulpfile c:\Users\Matthew\PhpstormProjects\website\gulpfile.js
[20:48:35] Starting 'watch'...
[20:48:35] Finished 'watch' after 7.94 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: ENOENT, stat 'c:\Users\Matthew\PhpstormProjects\website\resources\assets\sass\app.scss___jb_tmp___'
at Error (native)
Process finished with exit code 1
I'm really not sure what is causing this error, and from Googling, it appears to happen in many different circumstances. I'm not too sure what I am doing wrong. My gulpfile is below:
var gulp = require('gulp');
var watch = require('gulp-watch');
var batch = require('gulp-batch');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var plumber = require('gulp-plumber');
var del = require('del');
var config = {
bowerDir: './bower_components/',
publicDir: './public',
};
//Build Tasks
gulp.task('build', ['clean'], function() {
gulp.start(['css', 'fonts', 'js']);
});
//Clean Dir
gulp.task('clean', function() {
return del([config.publicDir + "/css", config.publicDir + "/fonts", config.publicDir + "/js"]);
});
//CSS Concat + Minification
gulp.task('css', function() {
return gulp.src(
[
config.bowerDir + 'bootstrap-sass/assets/stylesheets',
config.bowerDir + 'fontawesome/scss',
'./resources/assets/sass/app.scss'
])
.pipe(plumber())
.pipe(sass({
errLogToConsole: true
}))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest(config.publicDir + '/css'));
});
//Font Awesome
gulp.task('fonts', function() {
return gulp.src(config.bowerDir + '/fontawesome/fonts/**.*')
.pipe(plumber())
.pipe(gulp.dest(config.publicDir + '/fonts'));
});
//JavaScript Concat + Uglify
gulp.task('js', function() {
return gulp.src(
[
config.bowerDir + '/jquery/dist/jquery.min.js',
config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.min.js'
])
.pipe(plumber())
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest(config.publicDir + "/js"));
});
//Watch Task
gulp.task('watch', function() {
watch(['./resources/assets/sass/*', config.bowerDir + '/bootstrap-sass/assets/stylesheets/**'], batch(function(events, done) {
gulp.start('build', done);
}));
});
//Default Task
gulp.task('default', ['build']);
I would really appreciate any help you could provide. Thank you!
The __jb_tmp__ suffix signifies a temp file created by JetBrains applications like PhpStorm. When saving a file the file contents are first written to a temp file which is then renamed. By the time gulp.watch() tries to stat() the temp file it's already gone.
Try limiting your gulp.watch() glob from:
watch(['./resources/assets/sass/*',
to only SASS/SCSS files:
watch(['./resources/assets/sass/*.{sass,scss}',
I'm using gulp to watch certain files and run certain tasks however after the first few runs it seems to stop watching. If I save html files in the pages directory, after the first two to five updates, the templates task seems to stop running. I've included my gulpfile below.
// Include gulp
var gulp = require('gulp');
// Include plugins
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var notify = require('gulp-notify')
var htmlv = require('gulp-html-validator')
var swig = require('gulp-swig');
var plumber = require('gulp-plumber');
// Linting
gulp.task('lint', function() {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
gulp.task('sass', function() {
return gulp.src('./resources/scss/*.scss')
.pipe(sass()
.on('error', notify.onError(function(error) {
return 'Error: ' + error.message;
}))
)
.pipe(gulp.dest('./css'));
});
gulp.task('validate', function() {
return gulp.src('./**.html')
.pipe(htmlv({format: 'xhtml'}))
.pipe(gulp.dest('./validation_out'));
});
gulp.task('watch', function() {
gulp.watch('js/*.js', ['lint']);
gulp.watch('./resources/scss/*.scss', ['sass']);
gulp.watch('./pages/*.html', ['templates']);
});
gulp.task('templates', function() {
return gulp.src('./pages/*.html')
.pipe(swig({
load_json: true,
defaults: {
cache: false
}
}
))
.pipe(gulp.dest('.'));
});
gulp.task('default', ['lint', 'sass', 'templates', 'watch']);