接到新的項(xiàng)目后,首先我們要根據(jù)psd還原設(shè)計(jì)師的勞動(dòng)成果,如果用了css預(yù)處理器less或者sass,koala編譯,然后手動(dòng)刷新瀏覽器來查看效果...不僅費(fèi)時(shí),而且費(fèi)力,導(dǎo)致開發(fā)效率低下......
那么有沒有什么能幫助我們解放'雙手'呢? 當(dāng)然有啦,那就是gulp
關(guān)于gulp的介紹以及詳細(xì)的用法可以參照 https://www.gulpjs.com.cn/
1.在項(xiàng)目根目錄下 運(yùn)行 npm init 會(huì)創(chuàng)建一個(gè)package.json
- package.json里會(huì)記錄你項(xiàng)目所用的依賴
2.在package.json的同級(jí)(也就是項(xiàng)目的根目錄下)手動(dòng)創(chuàng)建一個(gè)gulpfile.js文件
- 名字必須為 gulpfile
3.全局/局部 安裝gulp
- --全局安裝
npm install gulp -g或者cnpm install gulp -g - --局部安裝
npm install gulp --save-dev或者cnpm install gulp --save-dev - 如果通過npm指令安裝gulp失敗,可以換成淘寶鏡像cnpm來安裝
4.分別安裝如下代碼中項(xiàng)目所需要的依賴
5.chrome應(yīng)用商店安裝liveReload插件
-
安裝成功會(huì)有如圖所示的小圖標(biāo)
image.png
6.在gulpfile.js里面引入gulp
貼一下我的配置
//獲取gulp
var gulp = require('gulp'),
// 獲取 less 模塊（用于編譯 less）
less = require('gulp-less'),
// 獲取 uglify 模塊（用于壓縮 JS）
uglify = require('gulp-uglify'),
// 獲取 css 模塊（用于壓縮 css）
cssUglify = require('gulp-minify-css'),
// 獲取 imagemin 模塊（用于壓縮 img）
imageMin = require('gulp-imagemin'),
livereload = require('gulp-livereload'),
connect = require('gulp-connect'); //首先需要在gukpfile.js中require這個(gè)插件，不要忘記了在項(xiàng)目中npm install
// 由于index頁面在最外層 所以單獨(dú)自動(dòng)刷新
gulp.task('index', function () {
gulp.src('index.html')
.pipe(connect.reload()) //服務(wù)器同步
})
// page下面所有的html頁面 刷新
gulp.task('html', function () {
gulp.src('page/**')
.pipe(connect.reload()) //服務(wù)器同步
})
// 編譯less
gulp.task('less', function () {
gulp.src('less/**')
.pipe(less())
.pipe(gulp.dest('css'))
.pipe(connect.reload()) //服務(wù)器同步
})
// 壓縮 css 文件
gulp.task('css', function () {
gulp.src('css/**')
.pipe(cssUglify())
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload()) //服務(wù)器同步
})
// 壓縮 js 文件
gulp.task('js', function () {
// 1. 找到文件
gulp.src('js/**')
// 2. 壓縮文件
.pipe(uglify({
mangle: false
}))
// 3. 另存壓縮后的文件
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload()) //服務(wù)器同步
})
// 壓縮img
gulp.task('images', function () {
gulp.src('images/**')
.pipe(imageMin({
progressive: true
}))
.pipe(gulp.dest('dist/images'))
.pipe(connect.reload()) //服務(wù)器同步
})
// 監(jiān)聽文件修改，當(dāng)文件修改則執(zhí)行l(wèi)ess任務(wù)
gulp.task('watch', function () {
gulp.watch('less/**', ['less']);
gulp.watch('css/**', ['css']);
gulp.watch('js/**', ['js']);
gulp.watch('index.html', ['index']);
gulp.watch('page/**', ['html']);
})
//定義livereload任務(wù)
gulp.task('connect', function () {
connect.server({
port: '8888', //定義端口號(hào)
livereload: true
});
});
gulp.task('default', ['less', 'css', 'js', 'images', 'watch', 'connect'])
這里我分別定義
htmllesscssjsimages等多個(gè)任務(wù),最后這些任務(wù)都添加到default任務(wù)中,我們只需要運(yùn)行g(shù)ulp就可以執(zhí)行所有任務(wù)
image.png
修改html,css,js等代碼,liveReload會(huì)推送到界面,并執(zhí)行自動(dòng)刷新
然后在地址欄里輸入localhost:8888,體驗(yàn)gulp之旅
