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))
}
);
});
Related
First of all, this may seem a dumb/noob question, but I'm more of a backend developer and I don't really work with npm and node that often. I was just used to start gulp watch and I was ready to go theming/styling.
So i just upgraded to gulp 4 with node version 10. Ofcourse i'm getting the Task never defined: default error. So i'm trying to migrate to gulp 4's way of defining tasks, but i can't just make it work with simple-task-loader. When i try a sample code, i'm getting gulp not defined. Here is the original old code gulpfile.js:
'use strict';
var gulp = require('gulp');
var taskLoader = require('gulp-simple-task-loader');
var plugins = require('gulp-load-plugins')();
var config = require('./config.json');
taskLoader({
taskDirectory: 'bower_components/gulp-tasks/tasks',
plugins: plugins,
config: config
});
And this is the default.js and watch.js from simple-task-loader
default.s:
'use strict';
module.exports = function(gulp, config, plugins) {
return function() {
return gulp.start(config.default_tasks);
};
};
watch.js:
'use strict';
module.exports = function(gulp, config, plugins) {
return function() {
config.production = false;
plugins.livereload.listen();
gulp.start(config.default_tasks);
config.default_tasks.forEach(function(task) {
if (config[task].watch) {
gulp.watch(config[task].watch, [task]);
} else {
gulp.watch(config[task].src, [task]);
}
})
return true;
};
};
When trying to use the new default.js code, I'm getting gulp not defined even though in the main gulpfile.js there is a require.
example new default.js:
exports.default = gulp.series(parallel(gulp, config, plugins));
gulp.task('default', gulp.series('start'));
Will return gulp not defined
I have the following gulpfile.js. The new_version task creates a new version directory in the source code.
const { src, dest } = require('gulp');
const fs = require('fs');
const minify = require('gulp-minify');
const del = require('del');
var PACKAGE = require('./package.json');
var version = PACKAGE.version;
var itb_version = PACKAGE.itb_version;
var name = PACKAGE.name;
var distPath = "./dist/" + version + "/js";
function clean() {
return del('dist/**', {force:true});
}
function new_version() {
return clean()
.pipe(function() {
if(!fs.existsSync(itb_version)) {
fs.mkdirSync(itb_version);
}
});
}
function build() {
return src('./src/myfile.js')
.pipe(minify({
ext:{
min:'.min.js'
}
}))
.pipe(dest(distPath));
}
exports.clean = clean;
exports.new_version = new_version;
exports.build = build;
When I run gulp new_version I get the following error:
[10:44:50] Using gulpfile ~/projects/myproject/gulpfile.js
[10:44:50] Starting 'new_version'...
[10:44:50] 'new_version' errored after 3.14 ms
[10:44:50] TypeError: clean(...).pipe is not a function
What am I doing wrong here?
del() returns a Promise not a stream, see del docs and pipe() is not a function of a Promise. Just call your clean function as part of a series. [code below not tested]
const { src, dest, series } = require('gulp');
...
exports.new_version = gulp.series(clean, new_version);
function new_version() {
if(!fs.existsSync(itb_version)) {
fs.mkdirSync(itb_version);
}
}
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'])
Everything works when I require a normal JavaScript file in Node:
var test = require('test.js');
console.log(test.foo); // prints the function
But now I have compressed that test.js file, reading it as a string works:
var fs = require('fs');
var zlib = require('zlib');
var gunzip = zlib.createGunzip();
var buffer = [];
fs.createReadStream('test.js.gz').pipe(gunzip);
gunzip.on('data', function(data){
buffer.push(data.toString())
});
gunzip.on('finish', function(){
console.log(buffer.join("")); //prints the JS file as string
}).on("error", function(e) {
console.log(e);
});
But, I don't want a string. Using eval does not seem right.
How can I evaluate the string as a JavaScript similar to what I get with require('test.js'); (I cannot use external libraries)
Here's a possible implementation:
const Module = require('module');
const zlib = require('zlib');
const fs = require('fs');
function requireGZ(filename) {
let code = zlib.gunzipSync(fs.readFileSync(filename)).toString();
let mod = new Module();
mod._compile(code, filename);
return mod.exports;
}
// Use:
let test = requireGZ('./test.js.gz');
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 ?