Compiling Jade into HTML using gulp task - javascript

I want to compile jade in html using gulp-jade. But after the task in the "build" folder does not have html files.
gulpfile.js
gulp.task('jade', function() {
return gulp.src('app/assets/template/**/*.jade')
.pipe(jade({
pretty: true
}))
.pipe(gulp.dest('build'))
.pipe($.size({title: 'jade'}));
});
Command-line:
PS E:\WORKS\fitover> gulp jade
[21:09:36] Using gulpfile E:\WORKS\fitover\gulpfile.js
[21:09:36] Starting 'jade'...
[21:09:36] 'jade' all files 0 B
[21:09:36] Finished 'jade' after 372 ms

Try
.pipe(gulp.dest('./build/'))
Or make sure the relative path to your build file is correct from your gulp task.

Tested on Ubuntu - the same result.
The solution is found. Not sure that this is the right decision, but it works. After commenting #Plato, I read the guide, and use the grunt-contrib-jade combined with a gulp-grunt.

Related

gulp doesn't create any directory

My workspace is directory "Super gulp" and below, there is directories about my files. The problem is that I was converting my .pug files into html files, and put them in directory "goal" but when I run "dev" nothing comes out. I've tried method:(Gulp doesn't create folder?) and found the result didn't changed.
Example to convert pug files into html files and put watcher on them.
Step: 1 ->
First install npm packages for compiling pug and watch for changes
npm i -S gulp-pug gulp-watch
Step: 2 ->
Then create and config your gulpfile.js.
First import an npm modules
gulpfile.js
const pug = require('gulp-pug');
const watch = require('gulp-watch');
//Then create compiling task
gulp.task('pug',() => {
return gulp.src('./src/*.pug')
.pipe(pug({
doctype: 'html',
pretty: false
}))
.pipe(gulp.dest('./src/goal/'));
});
//And then create watcher
gulp.task('watch',() => {
return watch('./src/*.pug', { ignoreInitial: false })
.pipe(gulp.dest('pug'));
});
Step: 3 -> Run the below cmd to run the task
gulp watch

Let Gulp merge/resolve require js files

I have a main.js file with some code and a couple of require('some_other_file.js'); lines in them (which in turn might require some other files).
The Requirement: Using Gulp 4.0, I would like to merge all these files together into one file by just supplying the main.js file as source and let some Gulp plugin figure out which other files need to be included as well (so not just simply using a combine on all the files!).
Using requirejs in gulp simply adds the require(...); lines to the output file.
gulp.task('compile_js', function(cb) {
var config = {
baseUrl: './src/js/',
include: ['main'],
out: './dist/main.js',
};
rjs.optimize(config, function(buildResponse){
console.log('build response', buildResponse);
cb();
}, cb);
});
Am I doing it wrong with requirejs or is there a Gulp plugin that can handle this?
Found it! Browserify seems to do the trick.
Browserify: http://browserify.org/
And an implementation in Gulp: https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md

Gulp task: get files with wiredep concatenate other js files and minify

I´m trying to build a gulp task that get all bower_components files with wiredep, then concatenates them together. Then concatenate some other JS files I have on a special folder an finally minify everything.
The problem is that I don´t know if I can specify wiredep another directory additional to the bower_components directory. If that´s not possible, is there any other solution I can use?
I´m a begginer using gulp, so any other error that you can point out in how I´m thinking my task would be highly appreciated.
var wiredep = require('wiredep')(
{
directory: 'static/bower_components', // default: '.bowerrc'.directory || bower_components
}).stream;
gulp.task('scripts',function(){
return gulp
.src('index.html') //I don´t really know what to put in the src
.pipe(wiredep())
.pipe($.inject(gulp.src("More JS files if wire dep can´t handle them")))
.pipe(minify())
.pipe(gulp.dest('static/dist/src/app.min.js'));
});
I would have a method like this (perhaps in a config file at the root of the project) to get whatever you wanted wired in with wiredep:
getWiredepDefaultOptions: function() {
var options = {
directory: bower.directory,//file path to /bower_components/
};
return options;
},
Then in your gulp task, have something like this:
gulp.task('wiredep', function() {
log('Wiring the bower dependencies into the html');
var wiredep = require('wiredep').stream;
var options = config.getWiredepDefaultOptions();
return gulp
.src('./index.html')
.pipe(wiredep(options))
.pipe(gulp.dest("wherever you want your index.html"));
});
Depending on what other things you want to wire in, you would have to add an ordering of some kind using tags within the index.html.

Gulp task for multiple js libraries along with appropiate names

Can anyone pls tell how to write gulp task for files in different folders. ?
I mean
www
js
a.js
lib
jq.js
Output:
www
js
a.min.js
lib
jq.min.js
I am unable to write in single task.
I am using rename,obfuscate and ngAnnotate plugin.
Use the array syntax for gulp.src as:
gulp.task('task-name', function () {
return gulp.src(['www/js/**/*.js', 'www/lib/**/*.js'])
.pipe(<Add your task>)
.pipe(gulp.dest('www'));
})

Run build only if there are changes in src

The story:
We have a team of testers working on automating end-to-end tests using protractor for our internal AngularJS application. Here is the task they usually run for "local" testing:
grunt.registerTask('e2e:local', [
'build:prod',
'connect:test',
'protractor:local'
]);
It runs the "build" task, starts a webserver and runs the e2e tests against the local build.
The build:prod task itself is defined as:
grunt.registerTask(
'build:prod', [
'clean',
'copy:all',
'copy:assets',
'wiredep',
'ngtemplates',
'useminPrepare',
'concat',
'ngAnnotate',
'autoprefixer',
'uglify',
'cssmin',
'copy:cssfix',
'usemin',
'copy:html',
'bowercopy',
'template:setProdVersion'
]
);
Here we have a lot of subtasks (it definitely could be improved, but this is how it looks now).
The problem:
Currently, it takes about 25 seconds for the build to complete. And, every time a person is running end-to-end tests, the build task is executed.
The question:
How can I run the build:prod task only if there are changes in src directory?
Note that the requirement here is to make it transparent for the testers who run the tests. I don't want them to remember when they need to perform a build and when not.
In other words, the process should be automated. The goal is to automatically detect if build is needed or not.
Note that ideally I would like to leave the build task as is, so that if it is invoked directly via grunt build:prod it would rebuild regardless of the datestamp of the previous build.
Thoughts and tries:
there is the closely related grunt-newer package, but, since we have a rather complicated build, having a clean task at the beginning, I'm not sure how to apply it in my case
what I was also thinking about is to, inside the e2e:local task, manually check the timestamps of the files inside dist and src and, based on that, decide if build:prod is needed to be invoked. I think this is what grunt-newer is doing internally
we started to use jit-grunt that helped to improve the performance
Here's an idea if you use git:
How about using something like grunt-gitinfo and using the last commit in HEAD as a base?
The idea is:
You create a new grunt task that checks for latest commit hash
You'd save this commit hash in a file that's added to gitignore (and is NOT in the clean folder, typically can be in root of repo)
Before saving to file, it'd check the value already in it (standard node fs module can do the read/write easily)
If the hash doesn't match, run build:prod task then save new commit hash
The testers build would depend on your new task instead of build:prod directly
Another option (still using git):
You can use something like grunt-githooks and create a git hook that runs after pull and calls the git build:prod, then you can remove it from the dependencies of the grunt task that testers run.
You might have another code to check for githook and install it if required though, which can be a one-time extra step for testers, or maybe baked into the grunt task they call.
I'm surprised noone has mentioned grunt-contrib-watch yet (it's in the gruntjs.com example file and I thought it was pretty commonly known!). From github: "Run predefined tasks whenever watched file patterns are added, changed or deleted." - heres a sample grunt file that would run your tasks any time any .js files are modified in src/ or in test/, or if the Gruntfile is modified.
var filesToWatch = ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'];
grunt.initConfig({
watch: {
files: filesToWatch,
tasks: ['build:prod',
'connect:test',
'protractor:local']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
You have your developers open a terminal and run grunt watch before they start modifying files, and every time those files are modified the tasks will automatically be run (no more going back to the terminal to run grunt build:prod every time).
It's an excellent package and I suggest you check it out. -- github -- npmjs.org
npm install grunt-contrib-watch --save-dev
Not the answer your are looking for with grunt, but this will be easy with gulp.
var fs = require('fs');
var gulpif = require('gulp-if');
var sourceChanged = fs.statSync('build/directory').mtime > fs.statSync('source/directory').mtime;
gulp.task('build:prod', function() {
if (!sourceChanged) {
return false;
}
return gulp.src('./src/*.js')
.pipe(.... build ....)
.pipe(gulp.dest('./dist/'));
});
Here's how we've done some Git HEAD sha work for our build. We use it to determine which version is currently deployed to our production environment - but I'm quite certain you could rework it to return a boolean and trigger the build if truthy.
Gruntfile.js
function getHeadSha() {
var curr, match, next = 'HEAD';
var repoDir = process.env.GIT_REPO_DIR || path.join(__dirname, '..');
try {
do {
curr = grunt.file.read(path.join(repoDir, '.git', next)).trim();
match = curr.match(/^ref: (.+)$/);
next = match && match[1];
} while (next);
} catch(ex) {
curr = 'not-found';
}
return curr;
}
grunt.initConfig({
replace: {
applicationVersion: {
src: '<%= config.dist %>/index.html',
overwrite: true,
replacements: [{
from: '{{APPLICATION_VERSION}}',
to: getHeadSha
}]
}
}
});
grunt.registerTask('build', {
'replace:applicationVersion',
/** other tasks **/
});
grunt.registerTask('e2e:local', {
'check_if_we_should_build',
/** other tasks **/
});
index.html
<html data-version="{{APPLICATION_VERSION}}">
<!-- -->
</html>
There's also the git-info package which would simplify this whole process, we're looking at switching over to that ourselves.
edit; I just noticed #meligy already pointed you in the direction of git-info. credit where credit is due.
I am not sure if its helpful or not but same things we have done it in our project using GULP framework. We have written a watcher in the gulp that continuously check for the source change and run a quick function to build the project. Its a Protractor Test case.
gulp.task('dome', function () {
gulp.src(["maintest.js"])
.pipe(notify("Change Found , Executing Scripts."))
.pipe(protractor({
configFile: "conf.js",
args: ['--baseUrl', 'http://127.0.0.1:8000']
})).on('error', function (e) {
throw e
});
})
gulp.task('default', function () {
gulp.watch('./webpages/*.js', ['dome']);
gulp.watch('maintest.js', ['dome']);
gulp.watch('conf.js', ['dome']);
});
Link to repo.
I don't have experience in protractor, but conceptually I think this could work.
What I could suggest is to set an alias in your ~/.cshrc to run the build commands only if a diff command returns true.
#./cshrc
alias build_on_diff 'diff -r branch_dir_1 branch_dir_2\
if ( $status == 1 ) then\
build:prod\
endif'
Just replace the diff command with whatever git uses, and it should work provided it returns a 1 status for differences detected. We apply a similar method at my workplace to avoid rebuilding files that haven't changed.

Categories