I'm using gulp-coffee to compile my coffee files to js, nothing fancy.
I'm having a hard time figuring how to remove js files (in the dest js directory) that DO NOT exist anymore in the source coffee folder.
I'm quite sure this does not concern directly gulp-coffee, but I'm kind of clueless and I'm not that proficient in gulp.
My Files structure
/app/
/coffee (source)
/js (dest)
My gulp task
gulp.task('coffee', function() {
return gulp.src('app/coffee/**/*.coffee')
.pipe($.changed('./app/js/', {extension: '.js'}))
.pipe($.coffee())
.on('error', logCoffeeError)
.pipe(gulp.dest('app/js/'));
});
If anybody is interested on the solution of this problem I ended up using this package that does exactly what I was looking for: https://github.com/StevenTheEVILZ/gulp-syncronize
USAGE:
gulp.task('unused', function() {
return syncronize({
src: 'app/coffee/', //Source folder
target: 'app/js/', //Output folder
extensions: {
'js': 'coffee', // Corresponds .js files to the .coffee files;
}
});
});
Related
I would like to use a bootstrap-template with js-files for my new angularjs project. New modules will be written in typescript.
So my idea was to transcipt all ts files into /build/js/
Then i would concat all js files from /app/**/*.js and from /build/**/*.js into app.js.
My project folder structure looks like this.
app
|-js-files
|-ts-files
build
|js folder with .js.map.files
|-app.js
|-app.js.map
|-vendor.js
On every step sourcemap files will be created.
There are my gulp tasks:
gulp.task('typescript', function () {
var tsResult = tsProject.src()
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(tsProject());
return tsResult.js
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest('./build/js'));
});
gulp.task('bundle', function () {
return es.merge(gulp.src(source.js.src), getTemplateStream())
.pipe(sourcemaps.init()) // sourcemaps will be generated
.pipe(concat('app.js'))
.pipe(sourcemaps.write('.')) // Now the sourcemaps are added to the .js file
.pipe(gulp.dest(destinations.js));
});
Is this the right way to set up a project like this?
Source mapping doesn't work...?
Should the folder /build/js be deleted after the bundling into app.js?
Is this the right way to set up a project like this
Personally no. Have all the files .js and .ts in the same folder ./src. Set allowJs:true and outDir:'./dist'. Then slowly start the .js -> .ts migration as needed.
More
As an example checkout this quick video : https://www.youtube.com/watch?v=gmKXXI_ck7w
I am minifying an index.html file with gulp (note: took over this project, build system has been done by former dev).
It all works fine, but the gulp task generates a HTML file which has a cryptic extension to it, like:
index-bd2c7f58f0.html
I understand this must have it's advantage, but I can't grasp what...:) Because the disadvantage now is:
The node server needs the presence of an index.html file to allow the '/' route to work.
Thus so far, I either have to copy the file on every build or create a link which needs to be updated on every build
What am I missing? Should I just instruct gulp to create a plain index.html file, or what are best practices here?
Also, which of the various plugin calls is actually responsible for attaching that extension to the file name?
EDIT: Seems to be the gulp-rev and revReplace calls
Here is the gulp task I am using:
gulp.task('html', ['styles', 'scripts'], function () {
var client = buildHTML('./client/index.html', './dist/public');
return merge(client);
});
function buildHTML(index, distFolder) {
var lazypipe = require('lazypipe');
var saveHTML = lazypipe()
.pipe($.htmlmin, {
removeComments: true,
removeOptionalTags: true
})
.pipe(gulp.dest, distFolder);
return gulp.src(index)
.pipe($.useref())
.pipe($.rev())
.pipe($.revReplace({replaceInExtensions: ['.js', '.css', '.html', '.ejs']}))
.pipe($.if('*.html', saveHTML()));
}
One advantage that I'm familiar with is when it's used with assets, when you recompile the asset and create a new fingerprint for that file, the request won't return the cached response because it's a different file. As for your problem, you probably shouldn't be adding that has to your index, I think it's pretty unorthodox
I recently developed a second page on one of my websites which I put in my projects folder so it can be accessed like "www.mysite.com/projects" My directory looks like this:
|js
|css
|projects - has index.php
|img
index.php
mailer.php
My Gulp file:
I used Gulp useref like this:
gulp.task('useref', function(){
return gulp.src('app/*.php')
.pipe(useref())
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
.pipe(gulp.dest('dist'))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
But when I execute the command to run useref, it doesn't useref the php file in projects or move the folder over to my dist folder. I tried doing it like return gulp.src('app/**/*.php') but that doesn't work either. Any ideas?
I think you have something backwards here. You have to pipe into useref your index file. Meaning that your source is not every php file in your app, but
gulp.src('your_Path/index.html')
Then, you have to tell useref where to look for all the files referenced in index.html with:
.pipe(useref({
searchPath: 'app/' // I'm guessing this is the path
}))
Also, you only need one dest in this case. Which makes your task:
gulp.task('useref', function(){
return gulp.src('your_Path/index.html') // Check this path
.pipe(useref({
searchPath: 'app/' // Check this path
}))
// Minifies only if it's a JavaScript file
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('dist'))
});
I have a task:
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
When I am adding new empty ".scss" file to '/admin_app/scss/' and running task from above, empty ".scss" files is copied to destination folder. If file is not empty everything is ok: a valid css file( with ".css" extension) is compiled and no ".scss" files are copied. The problem is when I add new ".scss" file to "/admin_app/scss/" directory, a "watch" task is triggered, and because file is empty, it is copied to destination directory. As a result, a lot of unneeded garbage is dest folder. Why this happens and how can I get rid of it?
UPDATED
My "watch" and "default" tasks:
gulp.task('watch', ['compile_scss'], function() {
apps.forEach(function(appName) {
gulp.watch('/admin_app/scss/*.scss', ['compile_scss']);
});
});
gulp.task('default', ['watch']);
One way to solve this problem would be to simply filter the empty files.
Try something like this:
var filter = require('gulp-filter'),
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(filter(function(a){ return a.stat && a.stat.size }))
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
There's also a plugin specifically for this purpose. You can use it like this:
var clip = require('gulp-clip-empty-files'),
gulp.task('compile_scss, function() {
return gulp.src('/admin_app/scss/*.scss')
.pipe(clip())
.pipe(sass())
.pipe(dest('/admin_app/css/'))
});
In addition: there seem to have been several reports of problems in gulp-sass and underlying libraries when compiling empty files. There is a Github issue for gulp-sass, reporting this should be solved in the 2.x versions of the plugin. If you're already running 2.x, the problem you are facing might be an issue introduced by solving the original problem.
If you add empty scss files in your sass folder, prefix them with underscore: _empty.scss.
See "Partials" here: http://sass-lang.com/guide#topic-4
You can create partial Sass files that contain little snippets of CSS
that you can include in other Sass files. This is a great way to
modularize your CSS and help keep things easier to maintain. A partial
is simply a Sass file named with a leading underscore. You might name
it something like _partial.scss. The underscore lets Sass know that
the file is only a partial file and that it should not be generated
into a CSS file. Sass partials are used with the #import directive.
Not sure if I'm missing something but I have the following grunt setup for grunt-contrib-copy tasks.
copy: {
build: {
files: {
"server-dist/": "server/**/*.!(coffee)",
"client-dist/": "client/**/*.!(coffee)"
}
}
}
The client-dist copies as I expect recursively running through the file tree but the server-dist all sub-folders get flattened to the base folder. Any ideas why this is happening? Here is the i/o
server/
views/
errors/
404.jade
layouts/
base.jade
becomes
server/
errors/
layouts/
base.jade
the views folder gets completely blown out. One more thing...when I removed !(coffee) it works but I need to exclude coffee files since I have a grunt-coffee watch task running.
A followup to zacks comment:
copy: {
mytask: {
files: [
{expand:true, cwd:'dev-js/abc/', dest:'js/test/', src:['def.js']}
]
}
}
This copies the file ./dev-js/abc/def.js to ./js/test/def.js - at least on my 0.4.1 version. Zacks comment and the link included was very helpful, especially the fact, that basePath has been replaced.
Apparently the grunt-contrib-copy task has a sophisticated logic that's trying to automatically detect the base directory for copying source files (see related issue)
The solution is to explicitly specify the basePath option:
copy: {
build: {
files: {
"server-dist/": "server/**/*!(.coffee)"
},
options: {
basePath: 'server' // base directory in the source path
}
}
}
P.S. I'm not sure, however, why removing !(.coffee) changes the behaviour for you. I tried the same on my local machine and get the same results when specifying "server/**/*" instead of "server/**/*.!(coffee)" (i.e. the views folder is skipped)