I am writing a gulp task that goes through several folders and watches for less files. I want to pipe the compiled css back to the same folder the less file came from. Unfortunately, I can't seem to find a good way to give each of the files a separate output folder.
gulp.task('less:watch', function() {
watch({
glob: 'src/**/less/**/*.less',
emit: 'one',
emitOnGlob: false
},function(files){
return files
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
// I need to pipe the files back to the folder they were generated from
.pipe(gulp.dest(path.join(__dirname, 'less')))
.on('error', gutil.log);
});
});
I believe you can process one file at a time with gulp.watch:
gulp.task('less:watch', function() {
gulp.watch('src/**/less/**/*.less',function(evnt) {
return gulp.src(evnt.path)
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(path.dirname(evnt.path)))
.on('error', gutil.log);
});
});
Related
I'm trying to minify and then create a copy without the "src." part of every index.src.php file inside any folder so I still have index.src.php available but a minified copy index.php:
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename(function(path){
path.basename = path.basename.replace('min\.', '');
}))
.pipe(gulp.dest('.'));
});
... so far this only literally renames the index.src.php into index.php
gulp-rename was easier than expected...
gulp.task('usemin', function() {
return gulp.src('./**/index.src.php')
.pipe(usemin({
inlinecss: [ minifyCss, 'concat' ]
}))
.pipe(rename({
basename: 'index'
}))
.pipe(gulp.dest('.'));
});
I have this task:
gulp.task('js', function() {
var webpackConfig = extend({}, require('./webpack.config.dev.js'), {
devtool: "source-map",
});
return gulp.src(config.paths.mainJs)
//.pipe(beautify({indent: {value: ' '}}))
.pipe(named())
.pipe(webpack(webpackConfig))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(through.obj(function (file, enc, cb) {
// Dont pipe through any source map files as it will be handled
// by gulp-sourcemaps
var isSourceMap = /\.map$/.test(file.path);
if (!isSourceMap) this.push(file);
cb();
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./deployment/deployment/js'))
.pipe(uglify())//JS_Parse_Error
The output of the previous pipe ./deployment/deployment/js/ is two files: bundle.js and bundle.js.map. So I think my pipe to uglify is wrong. How can I minify webpacks output?
All I had to do was modify my './webpack.config.dev.js` file already referenced in gulp to add the UglifyJsPlugin:
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})
],
I generated a js file with a source map using the following gulp task. The original sources get loaded in Firefox but do not get loaded in Chrome. Can anyone point out why Chrome can't find the sources which are clearly included in the generated index-[hash].js.map?
gulp.task('browserify', function () {
// set up the browserify instance on a task basis
return browserify({ debug: true })
.transform(babelify)
.require('client/web/private/js/es6/index.js', {
entry: true
})
.bundle()
.on('error', function handleError(err) {
console.error(err.toString());
this.emit('end');
})
.pipe(source('index.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
// Add transformation tasks to the pipeline here.
.pipe(uglify())
.pipe(rev())
// .on('error', gutil.log)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./client/web/public/dist/js'))
});
my app created by generator-gulp-webapp, i load some plugins with bower, and some plugin depend on .swf files, such as zeroclipboard and uploader, and my problem is how to move swf files to * folder when i build this app?
eg:
gulp.task('extras', () => {
return gulp.src([
'app/.',
'!app/*.html'
], {
dot: true
}).pipe(gulp.dest('dist'));
});
gulp.task('extras', () => {
return gulp.src([
'app/*.swf'
], {
dot: true
}).pipe(gulp.dest('dist/scripts'));
});
how to Merger that to one task?
i just add one more task!
gulp.task('swf', () => {
return gulp.src([
'app/scripts/*.swf'
], {
dot: true
}).pipe(gulp.dest('dist/scripts'));
});
done!!!
When running gulp, the tests run just fine. On file change, the errors get thrown but then run and pass the tests. If I pull up the browser with tests running, it just errors out. I noticed the files aren't getting served as I specify. My current directory looks like so
app
bower_components
node_modules
public
javascripts
tests
karma.conf.js
gulpfile.js
var gulp = require('gulp');
var karma = require('gulp-karma');
var shell = require('gulp-shell');
var testFiles = [
];
var serverDir = [
'./views/*.js',
'./test/**/*.js',
'./test/*.js',
'./routes/**/*.js',
'./routes/*.js',
'./models/**/*.js',
'./models/*.js',
'app.js'
];
gulp.task('test', function() {
// Be sure to return the stream
return gulp.src(testFiles)
.pipe(karma({
configFile: 'public/javascripts/karma.conf.js',
action: 'watch'
}))
.on('error', function(err) {
// Make sure failed tests cause gulp to exit non-zero
//throw err;
});
});
gulp.task('default', ['test', 'testServer', 'watchServerFiles']);
gulp.task('watchServerFiles', function() {
gulp.watch(serverDir, ['testServer']);
});
gulp.task('testServer', shell.task('jasmine-node-karma test/api.spec.js'));
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'../../bower_components/angular/angular.js',
'../../bower_components/angular-mocks/angular-mocks.js',
'../../bower_components/angular-resource/angular-resource.js',
'../../bower_components/angular-route/angular-route.js',
'../../bower_components/lodash/lodash.js',
'./app.js',
'./controllers/*.js',
'./directives/*.js',
'./services/*.js',
'./*.js',
'./test/*.js',
'./test/**/*.js'
],
reporters: ['progress'],
browsers: ['PhantomJS'],
plugins: [
'karma-jasmine',
'karma-phantomjs-launcher'
],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false
});
};
Check this thread
Both most voted answers work well, but I decided to go with replacing gulp-karma with karma itself. The advantage is that you don't need to duplicate the list of files in both gulpfile.js and karma.conf.js files.
var gulp = require('gulp');
var karma = require('karma').server;
gulp.task('tests', function(done) {
return karma.start({
configFile: __dirname + '/test/karma.conf.js',
singleRun: true
}, done);
});