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文件夾
3.創(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()) //調(diào)用壓縮
.pipe(gulp.dest('dist/html'))//壓縮到哪
.pipe(connect.reload());//時時監(jiān)聽
});
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') //要壓縮的css文件
.pipe(cssmin()) //調(diào)用壓縮
.pipe(gulp.dest('dist/css')) //壓縮到哪
.pipe(connect.reload()); //時時監(jiān)聽
});
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') //要合并壓縮的js文件
.pipe(uglify()) //調(diào)用壓縮
.pipe(concat('all.js')) //合并所有js文件
.pipe(gulp.dest('dist/myjs')) //壓縮到哪
.pipe(connect.reload()); //時時監(jiān)聽
});
gulp.task('default',['myjs']);
自動監(jiān)聽自動刷新
命令：npm install --save-dev gulp-livereload
npm install --save-dev gulp-connect
樣例：connect = require('gulp-connect');
livereload = require('gulp-livereload');
//自動監(jiān)聽
gulp.task('watch', function () {
gulp.watch('*.html', ['myminifyhtml']);
gulp.watch('js/*.js', ['myjs']);
gulp.watch('css/*.css', ['myminifycss']);
});
//設(shè)置刷新服務(wù)
gulp.t ('connect', function () {
connect.server({
host: 'localhost', //地址丈积，可不寫耿眉，不寫的話睁枕，默認localhost
port: 8020, //端口號雀摘，可不寫始衅，默認8000
root: './', //當前項目主目錄
livereload: true //自動刷新
});
});
gulp.task('default',['watch','connect']);
具體代碼參考以下
//定義依賴項和插件
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());
});
//自動監(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', //地址，可不寫备绽，不寫的話嚼贡，默認localhost
port: 8020, //端口號，可不寫娘扩，默認8000
root: './', //當前項目主目錄
livereload: true //自動刷新
});
});
//定義默認任務(wù)
gulp.task('default', ['uglifyjs','testCssmin','minify-html','watch','connect']);
