More Related Content
Similar to Gulp.js 自動化前端任務流程
Similar to Gulp.js 自動化前端任務流程 (20)
Gulp.js 自動化前端任務流程
- 21. Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');
!
gulp.task('default',['build'] function() {
// 系統預設直接執⾏行
});
!
gulp.task('build', function() {
// 其他task預設不執⾏行,可透過default預先載⼊入
});
- 22. Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');
!
gulp.task('default',['build'] function() {
// 系統預設直接執⾏行
});
!
gulp.task('build', function() {
// 其他task預設不執⾏行,可透過default預先載⼊入
});
步驟⼀一:預設載⼊入gulp,才可使⽤用gulp功能。
例:gulp.task、gulp.watch
- 23. Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');
!
gulp.task('default',['build'] function() {
// 系統預設直接執⾏行
});
!
gulp.task('build', function() {
// 其他task預設不執⾏行,可透過default預先載⼊入
});步驟⼆二:新增⼀一個task任務,命名為default,
當gulp啟動時,default會預設觸發。
- 24. Gulp起⼿手式(下)
• gulpfile.js
!
var gulp = require('gulp');
!
gulp.task('default',['build'] function() {
// 系統預設直接執⾏行
});
!
gulp.task('build', function() {
// 其他task預設不執⾏行,可透過default預先載⼊入
});
步驟三:其他task系統預設不執⾏行,但可透過default預先載⼊入
- 27. 2.在gulpfile.js撰寫語法
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function() {
connect.server();
});
gulp.task('default',['server'],function(){});
- 28. 2.在gulpfile.js撰寫語法
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function() {
connect.server();
});
gulp.task('default',['server'],function(){});
步驟⼀一:載⼊入node_modules裡⾯面的gulp-connect模組
- 29. 2.在gulpfile.js撰寫語法
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function() {
connect.server();
});
gulp.task('default',['server'],function(){});
步驟⼆二:撰寫task任務,命名為server,
connect.server()是gulp-connect的其中⼀一個功能,
即創⽴立⼀一個web server。
- 30. 2.在gulpfile.js撰寫語法
var gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function() {
connect.server();
});
gulp.task('default',['server'],function(){});
步驟三:為了讓server能直接開啟,所以寫在預設
default裡⾯面。
- 32. gulpfile.js
var gulp = require('gulp'),
connect = require('gulp-connect'),
compass = require('gulp-compass');
gulp.task('server', function() {
connect.server({
livereload: true
});
});
gulp.task('compass', function() {
gulp.src('./sass/*.sass')
.pipe(compass())
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
});
gulp.task('default',['server','compass'],function(){
gulp.watch('./sass/*',['compass']);
});
- 33. gulpfile.js
var gulp = require('gulp'),
connect = require('gulp-connect'),
compass = require('gulp-compass');
gulp.task('server', function() {
connect.server({
livereload: true
});
});
gulp.task('compass', function() {
gulp.src('./sass/*.sass')
.pipe(compass())
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
});
gulp.task('default',['server','compass'],function(){
gulp.watch('./sass/*',['compass']);
});
gulp-connect預設有livereload設定,
這些api⽤用法都要去NPM 官網都會寫。
- 34. ˇ
var gulp = require('gulp'),
connect = require('gulp-connect'),
compass = require('gulp-compass');
gulp.task('server', function() {
connect.server({
livereload: true
});
});
gulp.task('compass', function() {
gulp.src('./sass/*.sass')
.pipe(compass())
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
});
gulp.task('default',['server','compass'],function(){
gulp.watch('./sass/*',['compass']);
});
gulp.src指定檔案,*號代表所有Sass檔案,
可透過pipe將任務依序傳遞,
gulp.dest是指最終將檔案所放置的位置,
connect.reload()則是將瀏覽器重新refresh。
- 35. ˇ
var gulp = require('gulp'),
connect = require('gulp-connect'),
compass = require('gulp-compass');
gulp.task('server', function() {
connect.server({
livereload: true
});
});
gulp.task('compass', function() {
gulp.src('./sass/*.sass')
.pipe(compass())
.pipe(gulp.dest('./css'))
.pipe(connect.reload());
});
gulp.task('default',['server','compass'],function(){
gulp.watch('./sass/*',['compass']);
});
利⽤用gulp.watch監聽根⺫⽬目錄Sass資料夾內的檔案,
有更新就觸發compass的task。
- 37. gulpfile.js
var gulp = require('gulp'),
concat = require(‘gulp-concat')
uglify = require('gulp-uglify');
gulp.task('js', function() {
gulp.src('./js/*.js')
.pipe(concat(‘app.js')) //將所有js合併成app.js
.pipe(uglify()) //壓縮js
.pipe(gulp.dest(‘./dist/js/'))
});
!
gulp.task('default',['js'],function(){
gulp.watch(‘./js/*',['js']); //監聽js檔案
});
- 39. 熱⾨門Plugin
• gulp-connect 開啟server
• gulp-concat 合併
• gulp-imagemin 圖⽚片壓縮
• gulp-clean 清除檔案
• gulp-rename 重新命名
• gulp-minify-css 壓縮CSS
• gulp-jshint JS Debug
• gulp-uglify 壓縮檔案
- 46. sublime plugin
• 1.emmet - 減少打錯字的機會
• 2.HTML CSS JS Prettify - ⾃自動排版
• 3.SublimeLinter - Debug Code
• 4.autofilename - ⾃自動搜尋檔案位置