Merge branch 'master' of https://github.com/mwiley/gulp_example

mwiley · mwiley · commit ed7992e38688 · 2015-03-07T11:36:23.000-08:00
Conflicts:
	gulpfile.js
	index.html
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules/
+.sass_cache/
diff --git a/coffee/script.coffee b/coffee/script.coffee
@@ -1,2 +1,9 @@
-$ ->
-  $('h1').append('Hello')
+$list = $('#list')
+$('#add').click ->
+  $li = $('<li class="animate">')
+  $list.append $li
+  $li.html 'test'
+  return
+$('#remove').click ->
+  $('#list li:last').remove()
+  return
diff --git a/css/style.css b/css/style.css
@@ -4888,5 +4888,15 @@ button.close {
     display: none !important; } }
 
 .test {
+  color: red; }
+
+.animate {
+  transition-property: transform, color;
+  transition-timing: ease-out;
+  transition-duration: .3s;
+  color: red; }
+
+.animation:active {
+  transform: scale(1.02);
   color: blue; }
 
diff --git a/dist/all.js b/dist/all.js
@@ -1 +1,14 @@
-alert("Hello");
+var $list;
+
+$list = $('#list');
+
+$('#add').click(function() {
+  var $li;
+  $li = $('<li class="animate">');
+  $list.append($li);
+  $li.html('test');
+});
+
+$('#remove').click(function() {
+  $('#list li:last').remove();
+});
diff --git a/dist/all.min.js b/dist/all.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -33,8 +33,7 @@ gulp.task('sass', function() {
 gulp.task('coffee', function() {
   gulp.src('coffee/*.coffee')
   .pipe(coffee({bare: true}))
-    .on('error', gutil.log)
-  .pipe(gulp.dest('scripts'));
+  .pipe(gulp.dest('js'));
 });
 
 // Concatenate & Minify JS
@@ -51,12 +50,13 @@ gulp.task('scripts', function() {
 // Watch Files For Changes
 gulp.task('watch', function() {
     livereload.listen();
+    gulp.watch('coffee/*.coffee', ['coffee']);
     gulp.watch('js/*.js', ['lint', 'scripts']);
-    gulp.watch('scss/*.scss', ['sass']);
     gulp.watch('*.html', function(e){
     livereload.changed(e.path);
   });
+    gulp.watch('scss/*.scss', ['sass']);
 });
 
 // Default Task
-gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
+gulp.task('default', ['lint', 'sass', 'coffee', 'scripts', 'watch']);
diff --git a/index.html b/index.html
@@ -4,11 +4,22 @@
     <title>Bootstrap 101 Template</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
   </head>
   <body>
+
     <div class="page-wrapper">
       <h1 class="test">Hello, world!</h1>
       <script src="js/script.js"></script>
+
+      <ul id="list">
+        <li class='animate'>test</li>
+      </ul>
+
+      <input type="button" value="add" id="add">
+      <input type="button" value="remove" id="remove">
+      <script src="dist/all.min.js"></script>
     </div>
+
   </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1 +1,14 @@
-alert("Hello");
+var $list;
+
+$list = $('#list');
+
+$('#add').click(function() {
+  var $li;
+  $li = $('<li class="animate">');
+  $list.append($li);
+  $li.html('test');
+});
+
+$('#remove').click(function() {
+  $('#list li:last').remove();
+});
diff --git a/scss/style.scss b/scss/style.scss
@@ -1,6 +1,18 @@
 @import "bootstrap";
 
 .test{
+  color: red;
+}
+
+.animate{
+  transition-property: transform, color;
+  transition-timing: ease-out;
+  transition-duration: .3s;
+  color: red;
+}
+
+.animation:active{
+  transform: scale(1.02);
   color: blue;
 }
 .page-wrapper {
