sudo npm install -g gulp
mkdir ninghao-gulp
cd ninghao-gulp
npm init #全部回車
ls #可以看package.json
npm i gulp -D#局部安裝gulp
vim gulpfile.js
var gulp = require('gulp');#引入gulp
gulp.task('hello',function(){
cosole.log('您好')
})
#gulp任務(wù),第一個(gè)參數(shù)任務(wù)名稱,第二個(gè)參數(shù)執(zhí)行的匿名函數(shù)
gulp hello #控制臺(tái)可以見(jiàn)到您好
gulp.task('default',['hello']);
#默認(rèn)執(zhí)行任務(wù),第二個(gè)參數(shù)要執(zhí)行的任務(wù)名稱,一個(gè)數(shù)組
gulp #執(zhí)行數(shù)組中所有任務(wù)
gulp.task('copy-index',function(){
return gulp.src('index.html').pipe(gulp.dest('dist'));
})
#復(fù)制inde.html到dist目錄
gulp copy-index#執(zhí)行任務(wù)
```
+ Browser-Sync
```
npm i browser-sync -D #安裝browser-sync
var browserSync = require('browser-sync').create();
gulp.task('browser-sync',function(){
browserSync.init({
server:{
baseDir: 'dist'
},
files:['dist/index.html','dist/css/*.css']
})
})
```
+ gulp-connect #服務(wù)器
```
var connect = require('gulp-connect');
gulp.task('server',function(){
connect.server({
root: 'dist',
livereload: true
})
})
```
+ gulp-concat #合并多個(gè)文件
```
gulp.task('scripts',function(){
gulp.src(['javascript/jquery.js','javascript/a.js'])
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/js'));
})
```
+ gulp-uglify #壓縮js
```
gulp.task('scripts',function(){
gulp.src(['javascript/jquery.js','javascript/a.js'])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
})
```
+ gulp-rename #重命名文件
+ gulp-minify-css #壓縮css
+ gulp-imagemin #優(yōu)化圖像尺寸
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
