1.在系統(tǒng)安裝：npm install gulp-cli -g
2.在文件中安裝：
npm init -y安裝后出現(xiàn)json文件
npm install -save-dev gulp gulp-util安裝后出現(xiàn)node_modules文件夾
創(chuàng)建gulpfile.js文件并寫入
var gulp = require('gulp');
gulp.task('default', function() {
//寫自己的代碼
});
輸入gulp命令看是否安裝成功
gulp使用
html文件壓縮
命令：npm install --save-dev gulp-minify-html
樣例：var gulp = require('gulp'),
minifyHtml = require("gulp-minify-html");
gulp.task('myminifyhtml', function () {
gulp.src('*.html') //要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(gulp.dest('dist/html'));//壓縮到哪
.pipe(connect.reload());
});
gulp.task('default',['myminifyhtml']);
css文件壓縮
命令：npm install gulp-minify-css --save-dev
npm install --save-devgulp-clean-oss
樣例：var gulp = require('gulp'),
cssmin = require('gulp-minify-css');
gulp.task('myminifycss', function () {
gulp.src('css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
.pipe(connect.reload());
});
gulp.task('default',['myminifycss']);
js文件合并壓縮插件
命令：npm install --save-dev gulp-uglify gulp-concat
樣例：var gulp = require('gulp'),
uglify=require('gulp-uglify'),
concat=require('gulp-concat');
gulp.task('myjs', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/myjs'));
.pipe(connect.reload());
});
gulp.task('default',['myjs']);
重命名
命令：npm install --save-dev gulp-rename
樣例：rename = require('gulp-rename')
gulp.task('minify-html', function () {
gulp.src('*.html') //要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(rename('a.html'))
.pipe(gulp.dest('dist/html'));
});
自動(dòng)監(jiān)聽自動(dòng)刷新
命令：npm install --save-dev gulp-livereload
npm install --save-dev gulp-connect
樣例：connect = require('gulp-connect');
livereload = require('gulp-livereload');
//自動(dòng)監(jiān)聽
gulp.task('watch', function () {
gulp.watch('*.html', ['myminifyhtml']);
gulp.watch('js/*.js', ['myjs']);
gulp.watch('css/*.css', ['myminifycss']);
});
//設(shè)置刷新服務(wù)
gulp.task('connect', function () {
connect.server({
host: 'localhost', //地址，可不寫，不寫的話，默認(rèn)localhost
port: 8020, //端口號(hào)，可不寫，默認(rèn)8000
root: './', //當(dāng)前項(xiàng)目主目錄
livereload: true //自動(dòng)刷新
});
});
gulp.task('default',['watch','connect']);
具體代碼參考以下
//定義依賴項(xiàng)和插件
var gulp=require('gulp'),
gutil=require('gulp-util'),
uglify=require('gulp-uglify'),
cssmin = require('gulp-minify-css'),
minifyHtml = require("gulp-minify-html"),
rename = require('gulp-rename'),
connect = require('gulp-connect');
livereload = require('gulp-livereload');
//定義名為"js"的任務(wù)
gulp.task('uglifyjs', function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(connect.reload());
});
gulp.task('testCssmin', function () {
gulp.src('css/index1.css')
.pipe(cssmin())
.pipe(rename('aaaa.css'))
.pipe(gulp.dest('dist/css'))
.pipe(connect.reload());
});
gulp.task('minify-html', function () {
gulp.src('*.html') //要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(gulp.dest('dist/html'))
.pipe(connect.reload());
});
//自動(dòng)監(jiān)聽
gulp.task('watch', function () {
gulp.watch('*.html', ['minify-html']);
gulp.watch('js/*.js', ['uglifyjs']);
gulp.watch('css/*.css', ['testCssmin']);
});
//設(shè)置刷新服務(wù)
gulp.task('connect', function () {
connect.server({
host: 'localhost', //地址，可不寫，不寫的話，默認(rèn)localhost
port: 8020, //端口號(hào)，可不寫，默認(rèn)8000
root: './', //當(dāng)前項(xiàng)目主目錄
livereload: true //自動(dòng)刷新
});
});
//定義默認(rèn)任務(wù)
gulp.task('default', ['uglifyjs','testCssmin','minify-html','watch','connect']);
