Gulp的準(zhǔn)備工作
1、準(zhǔn)備工作
2、Gulp基礎(chǔ)
3、Gulp插件
安裝gulp
在node.js環(huán)境下輸入指令
npm install gulp –g全局安裝
npm install gulp –save-dev安裝依賴
初始化工程
1、新建文件夾
mkdir文件夾名稱
2 、cd命令進(jìn)入文件夾下
3、創(chuàng)建package.json文件（手動(dòng)創(chuàng)建或者命令行創(chuàng)建，npminit輸入相關(guān)信息）
4、然后發(fā)現(xiàn)沒(méi)有g(shù)ulp這個(gè)時(shí)候就需要輸入
? ? ?npm install gulp –save-dev然后出現(xiàn)一個(gè)node_modules/文件夾
（2）有配置文件的話直接輸入npm install就可以了
創(chuàng)建任務(wù)
? ?在根目錄下創(chuàng)建一個(gè)gulpfile.js的文件
? ?在文件中寫入以下內(nèi)容
? ? ? ?vargulp = require(‘gulp’);
? ? ? ? gulp.task('hello',function(){ //第一個(gè)參數(shù)是任務(wù)名稱，第二個(gè)參數(shù)是任務(wù)功能
? ? ? ? console.log('hello world!'); })
寫完之后呢
? ? ? ?在命令行中輸入gulp hello命令執(zhí)行輸出hello world！
? ? ? ?其他命令我們會(huì)在后面介紹 這里呢我們先介紹一個(gè)默認(rèn)的任務(wù)
? ? ? ? gulp.task('default',function(){})他也有回調(diào)函數(shù)，但是呢，但是回調(diào)函數(shù)，我們可以通過(guò)數(shù)組來(lái)定義
? ? ? ? ?gulp.task('default',['hello',....]);數(shù)組里放入我們定義的字符串然后命令行中輸入gulp就可以執(zhí)行了
Gulp基礎(chǔ)
gulp.src()方法可以幫助我們找出將要處理的文件，然后pipe()去處理這些找到的文件。pipe()可以理解為管道，每個(gè)管道就可以指定它的功能，最后我們?cè)偈褂胓ulp.dest()方法把處理好的文件放到指定的地方。
使用gulp來(lái)實(shí)現(xiàn)文件的copy
? 首先在我們工程目錄下新建一個(gè)測(cè)試使用的index.html,然后寫入相應(yīng)的內(nèi)容
? ? ? ?在我們個(gè)gulpfile.js文件中輸入以下內(nèi)容
? ? ? ? ? ? ? vargulp =require('gulp');
? ? ? ? ? ? ? ? gulp.task('copy-index',function(){
? ? ? ? ? ? ? ? ? ? ? //gulp.src()找到我們的index.html然后使用.pipe()通道
? ? ? ? ? ? ? ? ? ? ?//gulp.dest()發(fā)布拷貝
? ? ? ? ? ? ? ? ? ? ?returngulp.src('index.html').pipe(gulp.dest('dist'));
? ? ? ? ? ? ? ? });
? 在我們的命令行中執(zhí)行
? ?gulp copy-index命令然后去dist目錄下驗(yàn)證
拷貝圖片文件從某一個(gè)工程下面拷貝圖片
首先在本工程下放入一個(gè)圖片目錄文件
然后在gulpfile.js文件中寫入
var gulp = require('gulp');
gulp.task('images',function(){
return gulp.src('images/*.jpg').pipe(gulp.dest('dist/images'))
});
命令行中執(zhí)行g(shù)ulp images
然后去dist文件夾下去驗(yàn)證
下面再講一下如何拷貝images下面文件夾以及文件夾下文件
加入我們想要同時(shí)拷貝jpg，png文件
gulp.task('images',function(){
? ? returngulp.src('images/*.{jpg,png}').pipe(gulp.dest('dist/images'))
})
里面不要加空格
如何拷貝文件夾呢
gulp.task('images',function(){
? ? returngulp.src('images/**').pipe(gulp.dest('dist/images'))
})
/*代表拷貝文件夾以及文件夾下文件
當(dāng)前文件夾下所有文件以及子文件下所有文件（全拷貝）
兩個(gè)文件夾同時(shí)拷貝到某一個(gè)文件夾下
gulp.task('data',function(){
? ? ? returngulp.src(['xml/*.xml','json/*.json']).pipe(gulp.dest('dist/data'));
})
排除文件拷貝
gulp.task('data',function(){
? ? ? ?returngulp.src([‘xml/*.xml’,‘json/*.json’,'!json/b.json']).pipe(gulp.dest('dist/data'));
})
!json/b.json排除某個(gè)文件
多個(gè)任務(wù)執(zhí)行將上述幾個(gè)一起執(zhí)行
gulp.task('build',['copy-index','images','data'],function(){
? ? ?console.log('編譯成功');
})
?命令行g(shù)ulp build查看效果
?偵測(cè)文件變化
?gulp.task('watch',function(){
? ? ? ? ? gulp.watch('index.html',['copy-index']);gulp.watch('images/**/*.{jpg,png}',['images']);gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'], ? ? ['data']);
})
回到命令行執(zhí)行g(shù)ulp watch
結(jié)束ctrl +Ｃ
回到文件里面改變文件看下效果
Gulp插件
訪問(wèn)網(wǎng)站http://gulpjs.com/plugins
gulp sass
gulp編譯sass
?命令行安裝依賴
? ?npm install gulp-sass --save-dev
? ?創(chuàng)建sass文件，寫入內(nèi)容
? ?在gulpfile.js文件中寫入
? ? var sass = require('gulp-sass');
? ? ? ? ?gulp.task('sass',function(){
? ? ? ? ? ? ?returngulp.src('stylesheet/**/*.scss')
? ? ? ? ? ? ? .pipe(sass())
? ? ? ? ? ?.pipe(gulp.dest('dist/css'))
? })
gulp-connect插件搭建本地服務(wù)
命令行安裝npm install
? gulp-connect --save-dev
? ?在gulpfile.js文件中寫入
? var connect= require('gulp-connect');
? ? ? ? ? gulp.task('sever',function(){
? ? ? ? ? ? connect.server({root:’dist’});
? })
啟動(dòng)服務(wù)：命令行執(zhí)行g(shù)ulp sever
修改文件后頁(yè)面自動(dòng)刷新
gulp.task('sever',function(){
//connect.server();
//sever()方法介紹
//配置文檔根目錄
connect.server({
root：'dist'，
livereload:true
});
})
然后在我們copy任務(wù)中添加
gulp.task('copy',function(){
returngulp.src('index.html').pipe(gulp.dest('')) .pipe(connect.reload());
})
然后在watch中添加
gulp.task('watch',function(){
gulp.watch('index.html',['copy-index']);
})
然后創(chuàng)建一個(gè)
gulp.task('default',['sever','watch']);
最后執(zhí)行g(shù)ulp default命令
合并文件插件gulp-concat
命令行安裝npm install
gulp-concat --save-dev
在gulpfile.js中
var concat = require('gulp-concat');
gulp.task('scripts',function(){
returngulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'));
})
將合并js文件進(jìn)行壓縮gulp-uglify
命令行安裝npm install
gulp-uglify --save-dev
在gulpfile.js中
? ? ? var uglify = require('gulp-uglify');
? ? ? gulp.task('scripts',function(){
? ? ? ? ? ? ? return ?gulp.src(['javascripts/avalon.js','javascripts/index.js'])
? ? ? ? ? ? ? ? ? ? ?.pipe(concat('vendor.js'))
? ? ? ? ? ? ? ? ? ? ?.pipe(uglify())
? ? ? ? ? ? ? ? ? ? ?.pipe(gulp.dest('dist/js'));
? ? ? ? ? })
為了保留前后壓縮兩個(gè)文件
怎么做呢
安裝gulp-rename插件
命令行安裝npm install
gulp-rename --save-dev
var rename = require('gulp-rename');
gulp.task('scripts',function(){
return
gulp.src(['javascripts/avalon.js','javascripts/index.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(rename('vendor.min.js'))
.pipe(gulp.dest('dist/js'));
})
命令行執(zhí)行g(shù)ulp scripts驗(yàn)證是否生成兩個(gè)文件
如何壓縮css
命令行安裝npm install
gulp-minify-css --save-dev
var minifyCss = require('gulp-minify-css');
gulp.task(‘sass',function(){
return gulp.src('stylesheet/**/*.sass')
.pipe(sass())
.pipe(minifyCss())
.pipe(gulp.dest('dist/css'));
})
還可以對(duì)圖片進(jìn)行壓縮
安裝插件npm install gulp-imagemin
--save-dev
var imagemin = require('gulp-imagemin');
gulp.task('images',function(){
returngulp.src('images/**/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
})
執(zhí)行命令gulp images
