in the gulp trying to perform html minification in the build
Code:
gulp.task('html',function(){
return gulp.src('app/**/*.html')
.pipe($.useref.assets({searchPath: '{.tmp,app}'}))
// Concatenate And Minify JavaScript
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
// Concatenate And Minify Styles
.pipe($.if('*.css', $.csso()))
.pipe($.useref.restore())
.pipe($.useref())
// Update Production Style Guide Paths
.pipe($.replace('styles/main.css'))
// Minify Any HTML Output Files
.pipe(gulp.dest'dist'))
.pipe($.size({title: 'html'}));
});
Error:
TypeError: Uncaught, unspecified "error" event.
at TypeError (<anonymous>)
at Transform.emit (events.js:74:15)
at Transform.onerror (node_modules\gulp\node_modules\vinyl-fs\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:558:12)
at Transform.emit (events.js:95:17)
at Transform.<anonymous> (index.js:80:42)
at Array.forEach (native)
at Transform.<anonymous> (index.js:68:35)
at Array.for Each (native)
at Transform.<anonymous> (index.js:46:36)
at Array.forEach (native)
has anyone came across this issue , please suggest how to fix this
Thanks
Sundar
upgrade gulp-useref:
npm remove gulp-useref && npm i gulp-useref --save-dev
Related
I am trying to import theme.json file into scss file and also mapped all the json values in my scss file with the map-get methodology.
Below is the code I am trying to compile to css:
gulp.task('sass', function() {
console.log(util.env.type);
var epub = gulp.src(['app/epubsource/themes/default/main.scss'])
.pipe(compass({
config_file: 'node_modules/gulp-compass/test/config.rb',
sourcemap: true,
css: 'app/epubsource/themes/default',
sass: 'app/epubsource/themes/default'
}))
.pipe(gulp.dest('app/epubsource/themes/default/'))
.pipe(reload({
stream: true
}));
return mergeStream(epub);
});
Below is the code for importing json in main.scss file:
#import "theme.json";
BTW, both main.scss and theme.json are on the same folder level.
Below is the error I am getting:
LoadError on line ["54"] of C: cannot load such file -- sass-globbing
Run with --trace to see the full backtrace
events.js:141
throw er; // Unhandled 'error' event
^
Error: Compass failed
Please help me to get out from this issue.
Uninstalled all the sass and compass dependencies and re-installed.
Now in node_modules>test>config.rb, add a dependency 'sass-json-vars' like sass-globbing.
Now, try to compile. That works like a charm!
Trying to run eslint with gulp and getting this error. What have I missed? Here's my gulpfile.bable.js file.
import gulp from 'gulp';
import eslint from 'eslint';
const jsFiles = ['*.js', 'src/**/*.js'];
gulp.task('lint', () => {
gulp.src(jsFiles)
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
Here's the full error:
C:\Users\promer\projects\library>gulp lint
[14:50:35] Requiring external module babel-register
[14:50:35] Using gulpfile ~\projects\library\gulpfile.babel.js
[14:50:35] Starting 'lint'...
[14:50:35] 'lint' errored after 10 ms
[14:50:35] TypeError: (0 , _eslint2.default) is not a function
at Gulp.<anonymous> (C:/Users/promer/projects/library/gulpfile.babel.js:8:11)
at module.exports (C:\Users\promer\projects\library\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\Users\promer\projects\library\node_modules\orchestrator\index.js:134:8)
at C:\Users\promer\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
It was a simple mistake. I almost deleted the question, but I figured someone else might make the same mistake I did. While I have gulp-eslint installed I was actually loading regular eslint into my gulp file. The fix is to change this line
import eslint from 'eslint'
to
import eslint from 'gulp-eslint'
I am trying to get gulp-kss working on my project, but I am encountering issues when I try to run my task. I get the following error message:
[12:07:28] Using gulpfile ~/Documents/Websites/company/project-uiapp/gulpfile.js
[12:07:28] Starting 'generate-sc'...
[12:07:28] Finished 'generate-sc' after 20 ms
fs.js:549
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENOENT: no such file or directory, open '/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/gulp-kss/node_modules/kss/lib/template/index.html'
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at Stream.endStream (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/gulp-kss/index.js:42:27)
at _end (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/through/index.js:65:9)
at Stream.stream.end (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/through/index.js:74:5)
at DestroyableTransform.onend (/Users/Josua/Documents/Websites/company/project-uiapp/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:523:10)
at DestroyableTransform.g (events.js:260:16)
at emitNone (events.js:72:20)
at DestroyableTransform.emit (events.js:166:7)
at /Users/Josua/Documents/Websites/company/project-uiapp/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:965:16
at doNTCallback0 (node.js:419:9)
at process._tickDomainCallback (node.js:389:13)
How would I resolve this error? I have been searching Google and Stackoverflow but I have not found a solution yet. I am basing my solution off this gulp-kss. I have included my gulp task below:
...
// Generate styleguide with templates
gulp.task('generate-sc', function() {
gulp.src(['build-less'])
.pipe(gulpkss({
overview: __dirname + '/styles/styleguide.md'
}))
.pipe(gulp.dest('styleguide/'));
// Concat and compile all your styles for correct rendering of the styleguide.
gulp.src('./src/less/styles.less')
.pipe(less())
.pipe(gulpconcat('styles/style.css'))
.pipe(gulp.dest('styleguide/'));
...
I finally found the issue. I had to add kss to my package.json. I figured it would of been included with gulp-kss.
I try to use babel with gulp. But I faced error that can't resolve.
My gulp task looks like
`
var gulp = require('gulp'),
concat = require('gulp-concat'),
babel = require("gulp-babel");
gulp.task('default', function() {
gulp.src(cssSrc)
.pipe(concat('main.css'))
.pipe(gulp.dest('build'));
gulp.src(jsSrc)
.pipe(babel())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
gulp.watch(cssSrc,['css-task']);
gulp.watch(jsSrc,['js-task']);
});
`
jsSrc - array of pathes to js files
.babelrc looks so
{
"presets": ["es2015"]
}
When I run gulp I see this error
events.js:141
throw er; // Unhandled 'error' event
^
ReferenceError: [BABEL] C:\workspace\projects\test\test-client\app.js: Unknown option: C:\workspace\projects\test\test-client\.babelrc.presets
at Logger.error (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at DestroyableTransform._transform (C:\workspace\projects\test\test-client\node_modules\gulp-babel\index.js:30:20)
at DestroyableTransform.Transform._read (C:\workspace\projects\test\test-client\node_modules\gulp-babel\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:10)
app.js- the first file in jsSrc array
What could be wrong ?
I had the same issue as you described.
In my case, the solution was in addition to updating module babel-cli also to update module gulp-babel to the latest version with npm install gulp-babel --save-dev, as they updated the core library to 6.0.*.
Hope that helps!
I have some CSS that is created by gulp-ruby-sass. The resultant CSS file is referenced in the html used by gulp-useref to get my assets for concatenation, minification, etc. The problem is (I think) that gulp-ruby-sass hasn't written the CSS file to disk yet and gulp-useref can't find the file to include it in the build. So this code:
gulp.task("compile-css", function () {
gulp.src(paths.css.appFiles)
.pipe(gutil.env.debug ? sass({ debugInfo : true }) : sass())
.pipe(gutil.env.debug ? gutil.noop() : cssmin())
.pipe(gulp.dest(paths.css.appDistDir));
});
gulp.task("concatenateAllTheThings", ["compile-css"], function () {
var assets = useref.assets(); // useref package does the magic
return gulp.src(["./index.html", "./login.html", "./reset.html", "./confirm.html"])
.pipe(assets)
.pipe(gulpif('*.js',ngAnnotate()))
.pipe(gulpif('*.js', uglify()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(paths.output.destination));
});
throws this error:
[19:06:32] Starting 'compile-css'...
[19:06:32] Finished 'compile-css' after 13 ms
[19:06:32] Starting 'concatenateAllTheThings'...
[19:06:32] Starting Karma server...
events.js:72
throw er; // Unhandled 'error' event
^
Error: ENOENT, no such file or directory 'c....\webui\css\custom.css'
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:81:61)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....g\AppData\Roaming\npm\node_modules\gulp-useref\index.js:70:35)
at Array.forEach (native)
at DestroyableTransform.<anonymous> (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:46:36)
at Array.forEach (native)
at DestroyableTransform._transform (C....\AppData\Roaming\npm\node_modules\gulp-useref\index.js:43:15)
at DestroyableTransform.Transform._read (C....\AppData\Roaming\npm\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
How can I get gulp-useref to see the CSS file from gulp-ruby-sass?
To let know gulp when a task is finished, you need to return the stream. This way, a task with a dependency on a task that you return will wait for it to finish.
So change compile-css to
gulp.task("compile-css", function () {
return gulp.src ...
});