emmet+gulp.pdf
1
Emmet ID #xxx <div id="xxx"></div> h1#xxx <h1 id="xxx"></h1> table#xxx <table id="xxx"></table> Class input.form-control <input class="form-control"></input> table.table-striped <table class="table-striped"></table> a.btn.btn-primary a.<btn class="btn-primary"></btn> Child table>tr>td <table> <tr> <td></td> </tr> </table> ul>li>a <ul> <li><a href=""></a></li> </ul> form>input <form><input type="text"></form> Sibling input+button+input <input type="text"> <button></button> <input type="text"> form>input+button+input <form action=""> <input type="text"> <button></button> <input type="text"> </form> Attribute a[href="#"] <a href="#"></a> input[type="text"] <input type="text"> Text p{Hello World} <p>Hello World</p> span{Goodbye} <span>Goodbye</span> Mixed button#submit.btn <button id="submit" class="btn"></button> button#submit.btn{Submit} <button id="submit" class="btn">Submit</button> table.table>tr>td*3 <table class="table"> <tr> <td></td> <td></td> <td></td> </tr> </table> table.table>tr>td{Field}*3 <table class="table"> <tr> <td>Field</td> <td>Field</td> <td>Field</td> </tr> </table> table.table>tr>td{Field $}*3 <table class="table"> <tr> <td>Field</td> <td>Field</td> <td>Field</td> </tr> </table> ul>li{Item $$}*5 <ul> <li>Item 01</li> <li>Item 02</li> <li>Item 03</li> <li>Item 04</li> <li>Item 05</li> </ul> ul>li{Item $$@-}*5 <ul> <li>Item 05</li> <li>Item 04</li> <li>Item 03</li> <li>Item 02</li> <li>Item 01</li> </ul> ul>li.class$*5 <ul> <li class="class1"></li> <li class="class2"></li> <li class="class3"></li> <li class="class4"></li> <li class="class5"></li> </ul> ul>(li.class${This is class$})*5 <ul> <li class="class1">This is class1</li> <li class="class2">This is class2</li> <li class="class3">This is class3</li> <li class="class4">This is class4</li> <li class="class5">This is class5</li> </ul> table>(tr>th*5)+(tr>td*5) <table> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> table>(tr>th{Header $}*5)+(tr>td{Field $}*5) <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> </tr> <tr> <td>Field 1</td> <td>Field 2</td> <td>Field 3</td> <td>Field 4</td> <td>Field 5</td> </tr> </table> Gulp.js Plugin Installation npm install gulp-concat npm install gulp-uglify gulp-cssmin Plugin Installation + Update package.json npm install gulp-concat --save npm install gulp-uglify --save-dev Plugin Remove npm remove gulp-concat npm remove gulp-concat --save-dev Plugin Remove (2) แก้ ไข package.json โดยลบ Package ที่ไม ่ ต้องการออก npm prune Gulp Task gulpfile.js gulp.task('hello', function() { console.log('Hello World'); }); terminal gulp hello Default Task gulpfile.js gulp.task('default', function() { console.log('This is default task'); }); terminal gulp Task Chaining gulp.task('default', ['hello']); gulp.task('default', ['hello', 'uglify']); gulp.src() gulp.src('filename'); gulp.src(['file1', 'file2']); var paths = ['file1', 'file2']; gulp.src(paths); gulp-concat var concat = require('gulp-concat'); gulp.task('concat', function() { gulp.src('*.js') .pipe(concat('newfile.js')) .pipe(gulp.dest(__dirname)); }); gulp-uglify var uglify = require('gulp-uglify'); gulp.task('uglify', function() { gulp.src('*.js') .pipe(concat('newfile.js')) .pipe(uglify()) .pipe(gulp.dest(__dirname)); }); gulp.watch() gulp.task('watch', function() { gulp.watch('filename.js', ['concat']); gulp.watch(paths.src, ['reload']); });
-
Upload
heidi-johnson -
Category
Documents
-
view
152 -
download
0
Transcript of emmet+gulp.pdf
-
Emmet
ID
#xxx
h1#xxx
table#xxx
Class
input.form-control
table.table-striped
a.btn.btn-primarya.
Child
table>tr>td
ul>li>a
form>input
Sibling
input+button+input
form>input+button+input
Attribute
a[href="#"]
input[type="text"]
Text
p{Hello World}Hello World
span{Goodbye}Goodbye
Mixed
button#submit.btn
button#submit.btn{Submit}Submit
table.table>tr>td*3
table.table>tr>td{Field}*3
Field Field Field
table.table>tr>td{Field $}*3
Field Field Field
ul>li{Item $$}*5
Item 01 Item 02 Item 03 Item 04 Item 05
ul>li{Item $$@-}*5
Item 05 Item 04 Item 03 Item 02 Item 01
ul>li.class$*5
ul>(li.class${This is class$})*5
This is class1 This is class2 This is class3 This is class4 This is class5
table>(tr>th*5)+(tr>td*5)
table>(tr>th{Header $}*5)+(tr>td{Field $}*5)
Header 1 Header 2 Header 3 Header 4 Header 5 Field 1 Field 2 Field 3 Field 4 Field 5
Gulp.js
Plugin Installation
npm install gulp-concat
npm install gulp-uglify gulp-cssmin
Plugin Installation + Update package.json
npm install gulp-concat --save
npm install gulp-uglify --save-dev
Plugin Remove
npm remove gulp-concat
npm remove gulp-concat --save-dev
Plugin Remove (2) package.json Package
npm prune
Gulp Taskgulpfile.js
gulp.task('hello', function() { console.log('Hello World');});
terminal
gulp hello
Default Taskgulpfile.js
gulp.task('default', function() { console.log('This is default task');});
terminal
gulp
Task Chaining
gulp.task('default', ['hello']);
gulp.task('default', ['hello', 'uglify']);
gulp.src()
gulp.src('filename');
gulp.src(['file1', 'file2']);
var paths = ['file1', 'file2'];gulp.src(paths);
gulp-concat
var concat = require('gulp-concat');
gulp.task('concat', function() { gulp.src('*.js') .pipe(concat('newfile.js')) .pipe(gulp.dest(__dirname));});
gulp-uglify
var uglify = require('gulp-uglify');
gulp.task('uglify', function() { gulp.src('*.js') .pipe(concat('newfile.js')) .pipe(uglify()) .pipe(gulp.dest(__dirname));});
gulp.watch()
gulp.task('watch', function() { gulp.watch('filename.js', ['concat']); gulp.watch(paths.src, ['reload']);});
