From c1cd0bd46f30f33e1eaa7d51984d6db7d92ce5ae Mon Sep 17 00:00:00 2001 From: Hendrixer Date: Fri, 17 Jul 2015 12:24:35 -0700 Subject: [PATCH 01/31] chore(init) --- Gulpfile.js | 16 ++++++---------- client/index.html | 2 +- webpack.js => webpack.config.js | 4 ++-- 3 files changed, 9 insertions(+), 13 deletions(-) rename webpack.js => webpack.config.js (77%) diff --git a/Gulpfile.js b/Gulpfile.js index 9771dca..50a6668 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -9,7 +9,7 @@ map of paths for using with the tasks below */ var paths = { entry: 'client/app/app.js', - app: ['client/app/**/*.{js,styl,html}', 'client/index.html'], + app: ['client/app/**/*.{js,styl,html}'], js: 'client/app/**/*!(.spec.js).js', styl: 'client/app/**/*.styl', toCopy: ['client/index.html'], @@ -23,13 +23,9 @@ gulp.task('todo', function() { }); gulp.task('build', ['todo'], function() { - //TODO - /* - fill this task out to take in entry file - and build using the webpack plugin. - the plugin takes the webpack.config as an arg. - be sure to stream the result to the destination path - */ + return gulp.src(paths.entry) + .pipe(webpack(require('./webpack.config'))) + .pipe(gulp.dest(paths.dest)); }); gulp.task('serve', function() { @@ -47,7 +43,7 @@ gulp.task('serve', function() { simple task to copy over needed files to dist */ gulp.task('copy', function() { - return gulp.src(paths.toCopy, { base: '.' }) + return gulp.src(paths.toCopy, { base: 'client' }) .pipe(gulp.dest(paths.dest)); }); @@ -56,7 +52,7 @@ task to watch files for changes and call build and copy tasks */ gulp.task('watch', function() { gulp.watch(paths.app, ['build', browser.reload]); - gulp.watch(paths.toCopy, ['copy']); + gulp.watch(paths.toCopy, ['copy', browser.reload]); }); gulp.task('default', function(done) { diff --git a/client/index.html b/client/index.html index 7b81e55..5784cb4 100644 --- a/client/index.html +++ b/client/index.html @@ -5,7 +5,7 @@ ngBlog - + hey diff --git a/webpack.js b/webpack.config.js similarity index 77% rename from webpack.js rename to webpack.config.js index ea9a64b..c3d7da8 100644 --- a/webpack.js +++ b/webpack.config.js @@ -13,9 +13,9 @@ module.exports = { module: { loaders: [ - { test: /\.html$/, loader: 'raw' } + { test: /\.html$/, loader: 'raw' }, { test: /\.styl$/, loader: 'css!style!stylus' }, - // TODO: create loader for .js filest ransfroming from ES2015 to ES5 + { test: /\.js$/, loader: 'babel?stage=1', excludes: [/node_modules/] } ] }, From 116b1f48e0a4b249c0cf1e102817aa5d1d0600dc Mon Sep 17 00:00:00 2001 From: Hendrixer Date: Fri, 17 Jul 2015 19:12:23 -0700 Subject: [PATCH 02/31] chore() --- Gulpfile.js | 2 +- client/app/app.js | 16 +++++++++++----- client/app/app.styl | 12 ++++++++++++ client/app/components/components.js | 0 client/app/components/home/home.html | 5 +++++ client/app/components/home/home.js | 23 +++++++++++++++++++++++ client/app/components/home/home.styl | 6 ++++++ client/index.html | 5 ++++- client/styles/colors.styl | 1 + client/styles/index.styl | 2 ++ webpack.config.js | 3 ++- 11 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 client/app/app.styl create mode 100644 client/app/components/components.js create mode 100644 client/app/components/home/home.html create mode 100644 client/app/components/home/home.js create mode 100644 client/app/components/home/home.styl create mode 100644 client/styles/colors.styl create mode 100644 client/styles/index.styl diff --git a/Gulpfile.js b/Gulpfile.js index 50a6668..d56dbe0 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -11,7 +11,7 @@ var paths = { entry: 'client/app/app.js', app: ['client/app/**/*.{js,styl,html}'], js: 'client/app/**/*!(.spec.js).js', - styl: 'client/app/**/*.styl', + styl: ['client/app/**/*.styl', 'client/style/**/*.styl'], toCopy: ['client/index.html'], html: ['client/index.html', 'client/app/**/*.html'], dest: 'dist' diff --git a/client/app/app.js b/client/app/app.js index c4948cb..9b883e2 100644 --- a/client/app/app.js +++ b/client/app/app.js @@ -1,6 +1,12 @@ -const showMessage = ()=> { - alert('it works!!!'); -} - -showMessage(); +/* + * TODO: import angular and other dependencies + * like our app.styl and normalize.css and components/home + * ui-router + * so the below code works + */ +angular.module('app', [ + // TODO: register other modules here. + // remember, this array takes strings + // not objects +]); diff --git a/client/app/app.styl b/client/app/app.styl new file mode 100644 index 0000000..13f4599 --- /dev/null +++ b/client/app/app.styl @@ -0,0 +1,12 @@ +@import '../styles' +@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700); + +html +body + height 100% + +body + font-family 'Roboto', sans-serif + background-color bg-color + * + box-sizing border-box diff --git a/client/app/components/components.js b/client/app/components/components.js new file mode 100644 index 0000000..e69de29 diff --git a/client/app/components/home/home.html b/client/app/components/home/home.html new file mode 100644 index 0000000..35a8cad --- /dev/null +++ b/client/app/components/home/home.html @@ -0,0 +1,5 @@ +
+
+

{{ title }}

+
+
diff --git a/client/app/components/home/home.js b/client/app/components/home/home.js new file mode 100644 index 0000000..d99d133 --- /dev/null +++ b/client/app/components/home/home.js @@ -0,0 +1,23 @@ +// TODO: import required modules + +const home = angular.module('home', [ + +]) +.config(function($stateProvider, $urlRouterProvider) { + $urlRouterProvider.otherwise('/'); + + $stateProvider.state('home', { + url: '/', + templateUrl: '/app/components/home/home.html', + controller: 'HomeController' + }); +}) +.controller('HomeController', function($scope) { + $scope.title = 'Welcome to the blog!' + // TODO: be sure to import lodash! + $scope.items = _.times(5, i => { + return `I am item ${i}`; + }); +}); + +// TODO: export the module diff --git a/client/app/components/home/home.styl b/client/app/components/home/home.styl new file mode 100644 index 0000000..f74be09 --- /dev/null +++ b/client/app/components/home/home.styl @@ -0,0 +1,6 @@ +@import '../../../styles' + +.home + .title + center(600px) + text-align center diff --git a/client/index.html b/client/index.html index 5784cb4..36f7929 100644 --- a/client/index.html +++ b/client/index.html @@ -1,11 +1,14 @@ + ngBlog - hey + +
+ diff --git a/client/styles/colors.styl b/client/styles/colors.styl new file mode 100644 index 0000000..595a6a2 --- /dev/null +++ b/client/styles/colors.styl @@ -0,0 +1 @@ +bg-color = #efefef diff --git a/client/styles/index.styl b/client/styles/index.styl new file mode 100644 index 0000000..fe13ab0 --- /dev/null +++ b/client/styles/index.styl @@ -0,0 +1,2 @@ +@import 'colors' +@import 'jeet' diff --git a/webpack.config.js b/webpack.config.js index c3d7da8..c5f1619 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,8 @@ module.exports = { module: { loaders: [ { test: /\.html$/, loader: 'raw' }, - { test: /\.styl$/, loader: 'css!style!stylus' }, + { test: /\.styl$/, loader: 'style!css!stylus' }, + { test: /\.css/, loader: 'style!css' }, { test: /\.js$/, loader: 'babel?stage=1', excludes: [/node_modules/] } ] }, From ef7f6f8bfa9451309950befa7fe13f596edd5949 Mon Sep 17 00:00:00 2001 From: Hendrixer Date: Fri, 17 Jul 2015 19:27:46 -0700 Subject: [PATCH 03/31] chore() --- client/app/app.js | 37 +++++++++++++++++++++------- client/app/components/home/home.html | 5 ---- client/app/components/home/home.js | 22 +++++++++++------ client/app/components/home/home.styl | 3 +++ client/index.html | 2 +- webpack.config.js | 2 +- 6 files changed, 47 insertions(+), 24 deletions(-) delete mode 100644 client/app/components/home/home.html diff --git a/client/app/app.js b/client/app/app.js index 9b883e2..ee7b447 100644 --- a/client/app/app.js +++ b/client/app/app.js @@ -1,12 +1,31 @@ -/* - * TODO: import angular and other dependencies - * like our app.styl and normalize.css and components/home - * ui-router - * so the below code works - */ +// we don't need to use a variable +// or the from keyword when importing a css/styl file +// thanks the the styles loader it gets added as a +//