Can someone tell me what I'm doing wrong in my gulp.js file to allow for the user to hit save and it update my .css file from the .sass file change?
If I manually hit Run under my Task it will work
Can anyone see any issues?
/// <binding AfterBuild='compile' ProjectOpened='default' />
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
// Requires the gulp-sass plugin
var sass = require('gulp-sass');
gulp.task("sass", function (done) {
return gulp.src('Content/styles/**/*.scss', '!Content/styles/vendor')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('Content/styles/'));
});
function watch() {
gulp.watch('Content/styles/**/*.scss', gulp.series("sass"));
}
gulp.task("compile", gulp.series("sass"));
gulp.task('default', watch);
Related
Im trying to bundle my app so that I can push it to the test server using Gulp. This is my gulp file. It is not done yet, (Build is supposed to also run vendor-js) but I get an error when it runs bundle:app. This is my gulp file:
var gulp = require('gulp'),
tsc = require('gulp-typescript'),
Builder = require('systemjs-builder'),
tslint = require('gulp-tslint'),
sourcemaps = require('gulp-sourcemaps'),
tscConfig = require('./tsconfig.json');
gulp.task('lint', function () {
return gulp.src('app/**/*.ts')
.pipe(tslint({ formatter: 'prose' }))
.pipe(tslint.report());});
gulp.task('compile', ['lint'], function () {
return gulp.src('app/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsc(tscConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));});
var vendorJS = [
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/systemjs.config.js'];
var concat = require('gulp-concat');
gulp.task('vendor-js', function () {
return gulp.src(vendorJS)
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'));});
var systemjsBuilder = require('gulp-systemjs-builder');
gulp.task('bundle:app', function () {
var builder = systemjsBuilder();
builder.loadConfigSync('./systemjs.config.js');
builder.buildStatic('dist/js/main.js', 'app.min.js', {})
.pipe(gulp.dest('dist/js'));});
gulp.task('build', ['compile', 'bundle:app']);
The error I am getting is :
Unhandled rejection Error on fetch for dist/js/app.module at
file:///C:/path/dist/js/app.module Loading dist/js/main.js Error:
ENOENT: no such file or directory, open
'C:\Dev\path\dist\js\app.module' at Error (native)
Do you guys have any suggestions on how to make this work and compress the whole thing to something like "app.min.js" anyone?
I am trying to create a yeoman generator where I have to copy from templatePath to destinationPath some files and folders, but I would want to have some of this files with a variable that yeoman could change by one of the user's inputs.
like: "<%=name%>-plugin.php" -> "hello-plugin.php"
I saw some references that this can be done but I can't find how.
I am doing right now:
//Copy the configuration files
app: function () {
this.fs.copyTpl(
this.templatePath('**'),
this.destinationPath(),
{
name: this.props.pluginName,
name_function: this.props.pluginName.replace('-', '_'),
name_class: this.props.className,
description: this.props.pluginDescription
}
);
}
I thought that with that code my <%=name%> would magically changed on copyTpl but it doesn't work
I've just found the solution:
Use this.registerTransformStream(); to pipe all files through some node.js script.
var rename = require("gulp-rename");
//other dependecies...
module.exports = yeoman.Base.extend({
//some other things generator do...
writing: function() {
var THAT = this;
this.registerTransformStream(rename(function(path) {
path.basename = path.basename.replace(/(666replacethat666)/g, THAT.props.appName);
path.dirname = path.dirname.replace(/(666replacethat666)/g, THAT.props.appName);
}));
this.fs.copyTpl(
this.templatePath(),
this.destinationPath(), {
appName: this.props.appName
});
}
});
I'm using here gulp-rename to change file names to something else.
Assuming that this.props.appName == "myFirstApp", this:
666replacethat666-controller.html
will change its name to
myFirstApp-controller.html
Following #piotrek answer, I made a function to replace all props with some pattern (like ejs does) -> $$[your prop name]$$. warning: ES6 inside
var rename = require("gulp-rename");
//other dependecies...
module.exports = yeoman.Base.extend({
//some other things generator do...
writing: function() {
this.registerTransformStream(rename((path) => {
for (let prop in this.props) {
let regexp = new RegExp('\\$\\$' + prop + '\\$\\$', 'g')
path.basename = path.basename.replace(regexp, this.props[prop]);
path.dirname = path.dirname.replace(regexp, this.props[prop]);
}
}));
this.fs.copyTpl(
this.templatePath(),
this.destinationPath(), {
appName: this.props.appName
});
}
});
Example:
Let's assume you have this.props.appname = MyApp and this.props.AnotherProps = Test and you want to rename file or folder.
Name your file or folder MyFile$$appname$$.js -> MyFileMyApp.js
Name your file or folder $$appname$$.js -> MyApp.js
Name your file or folder $$AnotherProps$$.js -> Test.js
This is not possible anymore. The feature was bloated and was removed at some point in 2015.
For now, just rename the file:
this.fs.copy('name.js', 'new-name.js')
Lets say I have a project that uses bower, grunt, bowerify(with shim) and since I love Jest so much I want to test with that. How in the world do I get jest to see my browserify shim modules when it runs tests. I use grunt, to kick off the npm test command.
Here is my package.json file.
"browser": {
"jquery": "./bower_components/jquery/dist/jquery.js",
"foundation": "./bower_components/foundation/js/foundation/foundation.js",
"fastclick": "./bower_components/fastclick/lib/fastclick.js",
"greensock-tm": "./bower_components/gsap/src/uncompressed/TweenMax.js",
"greensock-css": "./bower_components/gsap/src/uncompressed/plugins/CSSPlugin.js",
"greensock-time": "./bower_components/gsap/src/uncompressed/TimelineMax.js",
"scrollmagic": "./bower_components/ScrollMagic/js/jquery.scrollmagic.js",
"handlebars": "./bower_components/handlebars/handlebars.runtime.js"
},
"browserify-shim": {
"jquery": "$",
"greensock-css": "CSSPlugin",
"fastclick": "FastClick",
"greensock-tm": "TweenMax",
"greensock-time": "TimelineMax",
"scrollmagic": "ScrollMagic",
"foundation": "foundation",
"handlebars": "Handlebars"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
Right now I almost have this worked out by doing this in my grunt file before I run the test.
grunt.registerTask("shimBowerForTests",function(){
var readJson = require('read-package-json');
var fs = require('fs');
var remapify = require('remapify');
readJson('./package.json', console.error, false, function (er, data) {
if (er) {
throw "There was an error reading the file";
}
var packages = data.browser;
var browserify = require('browserify');
for (var key in packages){
var b = browserify();
var wstream = fs.createWriteStream("devjs/test/modules/"+key+'.js');
b.add(packages[key]);
b.bundle().pipe(wstream);
}
});
});
and.
exec: {
jestTest: {
command: 'cp -r devjs/modules devjs/test/modules && npm test'
}
}
The problem is that using browserify so combine everything for the browser works great with my setup and I can require my shimmed modules like this.
require('jquery') //example but in the jest cli the test fail because they can find the module unless I somehow prefix it with ./, like so require('./jquery')
I'm guessing that the problem is that you've only installed your shimmed modules with bower. If you want them to work in node/jest, you'll have to install them with npm as well. Then just make sure Jest isn't mocking anything in the node_modules directory, and it should find all the required modules in there as long as the names match up.
Your Jest config in package.json should look like:
"jest": {
"unmockedModulePathPatterns": [
"./node_modules"
]
}
And then just download all the dependencies.
npm install jquery --save-dev
UPDATE
Instead of using my below solution you should opt for using Karma,karma browserify. I have converted the below solution into using karma and it is working much much better.
----------------------OLD ANSWER
What I actually did to solve this was, used the Jest source preprocessor to rewrite the require statement to look for a module in a certain directory in my /tests/ folder that I have created using grunt. The Folder contains the files listed in my browserify-shim, browser section of the package.json file.
EDIT: Here is how I shim bower, I made this script in the Gruntfile.js that puts all the bower modules and any commonjs modules that I need into an accessible directory.
grunt.registerTask("shimBowerForTests", function() {
var readJson = require('read-package-json');
var fs = require('fs');
readJson('./package.json', console.error, false, function(er, data) {
if (er) {
throw "There was an error reading the file";
}
var packages = data.browser;
var shim = data['browserify-shim'];
var browserify = require('browserify');
var exclude = ["jquery.maskedinput", "jquery"];
for (var key in packages) {
var b = browserify();
var wstream = fs.createWriteStream("devjs/test/modules/" + key + '.js');
if (shim[key] !== undefined && exclude.indexOf(key) === -1) {
b.add(packages[key]);
b.bundle().pipe(wstream);
} else {
var rstream = fs.createReadStream(packages[key]);
rstream.pipe(wstream);
}
}
});
});
Then in the Jest pre processor file I do this.
module.exports = {
process: function(src, path) {
var src2= src.replace(/require\([\"\']([^\.\'\"]+)[\"\']\)/g, "require(\'../modules/$1\')");
src2= src2.replace(/jest\.dontMock\([\"\']([^\.\'\"]+)[\"\']\)/g, "jest.dontMock(\'../modules/$1\')");
return src2;
}
};
I am trying to write a gulp task that does a few things
Install the Bower dependencies
Concat those dependencies into one file in the order of the dependencies
I was hoping to do this without having to specify the paths to those dependencies. I know there is the command bower list --paths but I am unsure of if it is possible to tie it together.
Any thoughts?
Edit
So I am trying to use the gulp-bower-files and I am getting an eaccess error and its not generating the concatenated file.
gulpfile.js
var gulp = require('gulp');
var bower = require('bower');
var concat = require('gulp-concat');
var bower_files = require('gulp-bower-files');
gulp.task("libs", function(){
bower_files()
.pipe(concat('./libs.js'))
.pipe(gulp.dest("/"));
});
bower.json
{
"name": "ember-boilerplate",
"version": "0.0.0",
"dependencies": {
"ember": "1.6.0-beta.1",
"ember-data": "1.0.0-beta.7"
}
}
and I keep coming across this error
events.js:72
throw er; // Unhandled 'error' event
^
Error: EACCES, open '/libs.js'
Use main-bower-files
It grabs all production (main) files of your Bower packages defined in your project's bower.json and use them as your gulp src for your task.
integrate it in your gulpfile:
var mainBowerFiles = require('main-bower-files');
I made this task that grabs all production files, filters css/js/fonts and outputs them in the public folder in their respective subfolders (css/js/fonts).
Here's an example:
var gulp = require('gulp');
// define plug-ins
var flatten = require('gulp-flatten');
var gulpFilter = require('gulp-filter'); // 4.0.0+
var uglify = require('gulp-uglify');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var mainBowerFiles = require('main-bower-files');
// Define paths variables
var dest_path = 'www';
// grab libraries files from bower_components, minify and push in /public
gulp.task('publish-components', function() {
var jsFilter = gulpFilter('**/*.js');
var cssFilter = gulpFilter('**/*.css');
var fontFilter = gulpFilter(['**/*.eot', '**/*.woff', '**/*.svg', '**/*.ttf']);
return gulp.src(mainBowerFiles())
// grab vendor js files from bower_components, minify and push in /public
.pipe(jsFilter)
.pipe(gulp.dest(dest_path + '/js/'))
.pipe(uglify())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest(dest_path + '/js/'))
.pipe(jsFilter.restore())
// grab vendor css files from bower_components, minify and push in /public
.pipe(cssFilter)
.pipe(gulp.dest(dest_path + '/css'))
.pipe(minifycss())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest(dest_path + '/css'))
.pipe(cssFilter.restore())
// grab vendor font files from bower_components and push in /public
.pipe(fontFilter)
.pipe(flatten())
.pipe(gulp.dest(dest_path + '/fonts'));
});
I was attempting to run the listed gulpfile and ran into a couple errors. First gulpFilter.restore is not a function, and secondly if you plan on restoring the filtered files you need to pass {restore: true} when you define your filters.
Like so:
// gulpfile.js
var mainBowerFiles = require('main-bower-files');
var gulp = require('gulp');
// define plug-ins
var flatten = require('gulp-flatten'),
gulpFilter = require('gulp-filter'),
uglify = require('gulp-uglify'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename'),
mainBowerFiles = require('main-bower-files');
// Define paths variables
var dest_path = 'www';
// grab libraries files from bower_components, minify and push in /public
gulp.task('publish-components', function() {
var jsFilter = gulpFilter('*.js', {restore: true}),
cssFilter = gulpFilter('*.css', {restore: true}),
fontFilter = gulpFilter(['*.eot', '*.woff', '*.svg', '*.ttf'], {restore: true});
return gulp.src(mainBowerFiles())
// grab vendor js files from bower_components, minify and push in /public
.pipe(jsFilter)
.pipe(gulp.dest(dest_path + '/js/'))
.pipe(uglify())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest(dest_path + '/js/'))
.pipe(jsFilter.restore)
// grab vendor css files from bower_components, minify and push in /public
.pipe(cssFilter)
.pipe(gulp.dest(dest_path + '/css'))
.pipe(minifycss())
.pipe(rename({
suffix: ".min"
}))
.pipe(gulp.dest(dest_path + '/css'))
.pipe(cssFilter.restore)
// grab vendor font files from bower_components and push in /public
.pipe(fontFilter)
.pipe(flatten())
.pipe(gulp.dest(dest_path + '/fonts'));
});
After the changes mentioned it ran perfectly. :)
We're building a Trigger app with Chaplin underneath. It would be nice, for development purposes, if we could use absolute paths to our assets, a la:
<link rel="stylesheet" href="/_forge/stylesheets/app.css">
<script src="/_forge/javascripts/vendor.js"></script>
<script src="/_forge/javascripts/app.js"></script>
Is it possible to do this in Trigger?
Unfortunately different platforms have different URLs on Trigger (due to them having their own features and limitations).
If you want to get absolute paths you can use the file module and do something along the lines of:
forge.file.getLocal("js/app.js", function (file) {
forge.file.URL(file, function (url) {
$('body').append('<script src="'+url+'"></script>');
});
});
I'm not sure why an absolute path is useful though, I would recommend only using one html page (index.html) as navigating to a new page is slower on the phone than changing the dom using javascript. In which case all of your relative paths should always be the same.
The easiest thing might be to detect the whether or not forge is present in your index.html and load the javascript accordingly:
<script type="text/javascript">
function addScript(src, callback) {
var tag = document.createElement('script');
tag.type = 'text/javascript';
tag.src = src;
tag.onload = callback;
document.getElementsByTagName('head')[0].appendChild(tag);
}
var vendor = "javascripts/vendor.js";
var app = "javascripts/app.js";
if(window.forge === undefined) {
vendor = "/"+vendor;
app = "/"+app;
}
addScript(vendor, function() {
addScript(app, function() {
require('initialize');
});
});
</script>