I dont know why i am receiving this error AssertionError [ERR_ASSERTION]: Task function must be specified GULP (node js , keystone js ). What causes this error ? anyone can help ?. I am using keystone app and sass compilation?. gulp file that will restart keystonejs app and compile sass. Is this regarding on the gulp version my goal version in my package.json is "gulp": "^4.0.2",.
My Gulp file
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jshintReporter = require('jshint-stylish');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var shell = require('gulp-shell')
var bs = require('browser-sync').create();
var paths = {
'src':['./models/**/*.js','./routes/**/*.js', 'keystone.js', 'package.json'],
'style': {
all: './public/styles/**/*.scss',
output: './public/styles/'
}
};
// gulp lint
gulp.task('lint', function(){
gulp.src(paths.src)
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter));
});
// gulp watcher for lint
gulp.task('watch:lint', function () {
gulp.src(paths.src)
.pipe(watch())
.pipe(jshint())
.pipe(jshint.reporter(jshintReporter));
});
gulp.task('sass', function(){
gulp.src(paths.style.all)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(paths.style.output))
.pipe(bs.stream());
});
gulp.task('watch:sass', function () {
gulp.watch(paths.style.all, ['sass']);
});
gulp.task('browser-sync', function(){
bs.init({
proxy: 'http://localhost:3000',
port: '4000'
});
});
gulp.task('runKeystone', shell.task('node keystone.js'));
gulp.task('watch', ['watch:sass', 'watch:lint']);
gulp.task('default', ['watch', 'runKeystone', 'browser-sync']);
Can't make this script work, and also need advice:
How to make browser reload when i change any of the files after initial load?
Is there any way, when browser reload to stay on the same page (say page http://wpsass.dev/sass/mixin) and not reload the base url (http://wpsass.dev)
I'm trying this for a wordpress theme development.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var autoprefixer = require('gulp-autoprefixer');
var theme = 'theme';
gulp.task('sass', function() {
return gulp.src('code/wp-content/themes/'+theme+'/app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass({
includePaths: [
'node_modules/susy/sass',
'node_modules/node-normalize-scss'
],
outputStyle: 'expanded', // for production outputStyle: 'compressed'
debugInfo: true,
}))
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(gulp.dest('code/wp-content/themes/'+theme+'/dist/css/'))
.pipe( browserSync.stream() )
});
gulp.task('scripts', function() {
return gulp.src([
'code/wp-includes/js/jquery/jquery.js',
'code/wp-includes/js/jquery/jquery-migrate.js',
'code/wp-includes/js/wp-embed.js',
'code/wp-content/themes/'+theme+'/app/js/script.js'
])
.pipe(concat('all.js')) // concat all files in one file all.js
.pipe(gulpIf('*.js', uglify())) // minify file if is .js format
.pipe(gulp.dest('code/wp-content/themes/'+theme+'/dist/js/'))
.pipe( browserSync.stream() )
});
gulp.task('watch', ['sass', 'scripts'], function (){
browserSync.init({
injectChanges: true,
proxy: {
target: "wpsass.dev",
ws: true
}
});
gulp.watch('code/wp-content/themes/'+theme+'/app/scss/**/*.scss', ['sass'] );
gulp.watch('code/wp-content/themes/'+theme+'/app/js/**/*.js', ['scripts']);
gulp.watch('code/wp-content/themes/'+theme+'/**/*.php', browserSync.reload);
});
Terminal result:
PS D:\Projects\wp-sass> gulp watch
[15:25:45] Using gulpfile D:\Projects\wp-sass\gulpfile.js
[15:25:45] Starting 'sass'...
[15:25:45] Starting 'scripts'...
[15:25:48] Finished 'sass' after 3.08 s
[15:25:48] Finished 'scripts' after 3.08 s
[15:25:48] Starting 'watch'...
[15:25:48] Finished 'watch' after 276 ms
[BS] Proxying: http://wpsass.dev
[BS] Access URLs:
-----------------------------------
Local: http://localhost:3000
External: http://10.2.101.8:3000
-----------------------------------
UI: http://localhost:3002
UI External: http://10.2.101.8:3002
-----------------------------------
[BS] Reloading Browsers...
Below is my current Gulpfile.js and when I'm attempting to run gulp minify I'm getting the error, "Task 'minify' is not in your gulpfile". However, I'm able to run gulp sass with no issues. I also have each module installed with npm.
module.exports = function(gulp) {
'use strict'
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('minify', function() {
return gulp.src('app/css/**/*.css')
.pipe(cssnano())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('app/css/min'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass', 'cssnano'], function() {
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app/'
},
})
})
}
You should not treat the gulpfile.js as a node module and drop the following part
module.exports = function(gulp) {
(don't forget to remove the closing curly (}) at the end of the gulpfile.js)
Then, you should require gulp
var gulp = require('gulp');
That should make it run smoothly.
Why it does run your gulp sass, I don't know. I just created a simple test file in a fresh directory, and it didn't recognise the sass task for me. Maybe you installedgulp, sass or both globally at some point (e.g. earlier project).
I try to understand how to use gulp with these useful and popular plugins. There are what I have:
runned go(lang) server on localhost:8000
static/local html files under app folder which are used by server to form pages
scss files under the same directory, which are converted into css and then autoprefixed
Here is my gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
livereload = require('gulp-livereload');
// "./" - it's "app" directory
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(watch('./*.scss'))
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(gulp.dest('./'));
});
So what I need:
watch html, css/scss files for change and make reload on localhost:8000 (chrome's open tab)
it will be great if there is no need to use:
livereload chrome plugin
expressjs framework
reload html pages if it opened directly just like file without server
I've read that it is possible to achieve this by using gulp-embedlr and gulp-webserver. If so, how to do it?
Ok, the best solution that I find is using Gulp + BrowserSync! It's great solution.
Here is the code of my gulpfile.js:
var gulp = require('gulp'),
sourcemaps = require('gulp-sourcemaps'),
sass = require('gulp-sass'),
watch = require('gulp-watch'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('browserSync', function() {
browserSync({
//logConnections: false,
//logFileChanges: false,
notify: false,
open: false,
server: {
baseDir: "./"
}
});
});
gulp.task('sass', function() {
return gulp.src('./css/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer('> 5%'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))
.pipe(reload({stream:true}));
});
gulp.task('watch', function() {
gulp.watch('./css/*.scss', ['sass']);
gulp.watch('./*.html', reload);
});
gulp.task('default', ['watch', 'sass', 'browserSync']);
There is no sense to explain the code above. Just read this: http://www.browsersync.io/docs/gulp/
Background: I am compiling 2 dependent TypeScript files to js, which produces also source maps (one source map per file) using tsc 1.0
I'm using -m commonjs and then use browserify to generate a single bundle.js
However I noticed that I get the original source map references twice in the bundle, which doesn't seem to work.
Passing --debug doesn't seem to do the trick either.
I had a feeling this issue: https://github.com/substack/node-browserify/issues/325 is somewhat related, but I couldn't figure out how the issue was resolved.
Also https://github.com/substack/browser-pack was suggested, but again I don't fully understand how to use it, is it a replacement to browserify?
Bottom line, I would like to merge the 2 js files but "merge" the js to ts source maps using browserify. Is that possible?
tsify is a browserify plugin that is better and replaces e.g. typescriptifier.
npm install tsify browserify watchify
You use tsify like this:
browserify src/index.ts -p tsify --debug -o build/index.js
Notice that this supports browserify --debug switch, no extra tricks required. So you can also use it with watchify like this:
watchify src/index.ts -p tsify --debug -o build/index.js
Using the minifyify browserify plugin I believe you can use TypeScript with Browserify and retain the source maps. After compiling the TypeScript files you should be able to pass the "entry" file (the one that imports the other one via commonjs syntax) through browserify with the minifyify plugin.
var browserify = require('browserify'),
bundler = new browserify();
bundler.add('entry.js');
bundler.plugin('minifyify', {map: 'bundle.js.map'});
bundler.bundle({debug: true}, function (err, src, map) {
if (err) console.log(err);
fs.writeFileSync('bundle.js', src);
fs.writeFileSync('bundle.js.map', map);
});
Here is my working solution:
var settings = {
projectName : "test"
};
gulp.task("bundle", function() {
var mainTsFilePath = "src/main.ts";
var outputFolder = "bundle/src/";
var outputFileName = settings.projectName + ".min.js";
var pkg = require("./package.json");
var banner = [
"/**",
" * <%= pkg.name %> v.<%= pkg.version %> - <%= pkg.description %>",
" * Copyright (c) 2015 <%= pkg.author %>",
" * <%= pkg.license %>",
" */", ""
].join("\n");
var bundler = browserify({
debug: true,
standalone : settings.projectName
});
// TS compiler options are in tsconfig.json file
return bundler.add(mainTsFilePath)
.plugin(tsify)
.bundle()
.pipe(source(outputFileName))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(uglify())
.pipe(header(banner, { pkg : pkg } ))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(outputFolder));
});
I created example project.
You can run it with $(npm bin)/gulp build --env=dev for development environment and source maps will be generated.
There is gulpfile.js:
'use strict';
var path = require('path'),
gulp = require('gulp'),
del = require('del'),
typescript = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
inject = require('gulp-inject'),
babel = require('gulp-babel'),
argv = require('yargs').argv;
var devEnvironment = 'dev',
prodEnvironment = 'prod',
environment = argv.env || prodEnvironment,
isDevelopment = environment === devEnvironment;
var projectPath = __dirname,
srcDir = 'src',
srcPath = path.join(projectPath, srcDir),
buildDir = path.join('build', environment),
buildPath = path.join(projectPath, buildDir),
distDir = 'dist',
distRelativePath = path.join(buildDir, distDir),
distPath = path.join(buildPath, distDir);
var tsSrcPath = path.join(srcPath, 'typescript'),
tsGlob = path.join(tsSrcPath, '**', '*.ts'),
tsBuildPath = path.join(buildPath, 'tsc');
var indexHtmlName = 'index.html',
indexJsName = 'index.js';
var distIndexJsPath = path.join(distPath, 'index.js'),
distIndexHtmlPath = path.join(distPath, indexHtmlName);
var tsProject = typescript.createProject('tsconfig.json');
console.log('Environment: ' + environment);
gulp.task('clean', function () {
return del([buildPath]);
});
gulp.task('tsc', ['clean'], function () {
var stream = gulp.src([tsGlob]);
if (isDevelopment) {
stream = stream
.pipe(sourcemaps.init());
}
stream = stream
.pipe(typescript(tsProject))
.pipe(babel({
presets: ['es2015']
}));
if (isDevelopment) {
stream = stream.pipe(sourcemaps.write({sourceRoot: tsSrcPath}));
}
return stream.pipe(gulp.dest(tsBuildPath));
});
gulp.task('bundle', ['tsc'], function () {
var b = browserify({
entries: path.join(tsBuildPath, indexJsName),
debug: isDevelopment
});
var stream = b.bundle()
.pipe(source(indexJsName))
.pipe(buffer());
if (!isDevelopment) {
stream = stream.pipe(uglify());
}
return stream
.on('error', gutil.log)
.pipe(gulp.dest(distPath));
});
gulp.task('build', ['bundle'], function() {
return gulp.src(path.join(srcPath, indexHtmlName))
.pipe(inject(gulp.src([distIndexJsPath], {read: false}), {ignorePath: distRelativePath, addRootSlash: true}))
.pipe(gulp.dest(distPath));
});
You should pay attention to lines:
stream = stream.pipe(sourcemaps.write('', {sourceRoot: tsSrcPath})); - write inline source maps with sourceRoot pointing to your typescript sources path. Inline maps are written directly to .js files generated by tsc to build/dev/tsc.
debug: isDevelopment - in development environment make browserify generate his own source maps for resulting bundle build/dev/dist/index.js file so it will have source maps referencing .js files from build/dev/tsc which in turn have source maps referencing .ts files from src/typescript.
With this setup you will be able to see and debug .ts files in browser:
I faced similar issue when trying to debug my Angular2 app running in Chrome in Visual Studio Code (Using Debugger for Chrome extension)
I use gulp as my task runner and my setup is as follows:
Typescript files -> tsc -> intermediate es5 js -> browserify (plus uglify in production build) -> compiled bundle
My directory structure is as follows:
|- src
|- my .ts files here
|- main.ts - my entry file
|- dist
|- intermediate files go here
|- web
|- app.js - final bundle
|- app.js.map - final bundle map
|- gulpfile.js
gulpfile.js:
var gulp = require('gulp'),
tsc = require('gulp-typescript'),
browserify = require('browserify'),
uglify = require('gulp-uglify'),
sourcemaps = require('gulp-sourcemaps'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer');
gulp.task('tsc', [], () => {
return gulp.src(['src/**/*.ts'])
.pipe(sourcemaps.init())
.pipe(tsc({
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}))
.pipe(sourcemaps.write(null, {
"sourceRoot": function(file) {
let parts = file.relative.split('\\');
let root = Array(parts.length + 1).join('../') + 'src';
return root;
}
}))
.pipe(gulp.dest('dist/'));
});
gulp.task('bundle', ['tsc'], () => {
let b = browserify({
entries: 'dist/main.js',
debug: true,
});
return b.bundle()
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./', {
"sourceRoot": "../",
}))
.pipe(gulp.dest('web/'));
})
gulp.task('default', ['bundle']);
Explanation/reasoning:
For some reason browserify doesn't read and parse .js.map files linked in .js file (via special comment at the end) but it does when the source map is embedded in js file. So, by passing null instead of path to sourcemaps it will embed it at the end of generated .js file.
Next issue I noticed was that sourcemaps doesn't automatically follow directory structure (add '../' to sourceRoot when it goes to next directory level), so I made a quick function to complement this. Keep in mind that it only works on Windows - on Linux you'd have to change split character.
function(file) {
let parts = file.relative.split('\\'); // put '/' here on Linux
let root = Array(parts.length + 1).join('../') + 'src';
return root;
}
Certainly there is a way to detect correct path separator, I'm debugging only on Windows thus it's not important for my purposes.
I hope it helps someone, cause I've spent whole Sunday morning tracking down this problem.