簡單介紹
gulp是基于node開發(fā)的所以可以使用npm這個nodejs的包管理工具安裝gulp，使用npm首先得配置node環(huán)境
Install
npm install gulp-cli -g 全局安裝gulp
gulp --help 返回幫助信息
package.json
npm init 初始化npm
npm install gulp gulp-util --save-dev //從本地把整個gulp文件夾拉過來
task
創(chuàng)建gulpfile.js文件
var gulp=require('gulp');
gulp.task('hello', function () {
console.log('hello');
});
gulp.task('default',['hello']);
basic
gulp.src()找出想要處理的文件
.pipe()通過pipe()去處理找出來的文件，可以理解為管道
.pipe(gulp.dest())處理好的文件放到指定地方
復(fù)制html文件
var gulp=require('gulp');
gulp.task('hello', function () {
return gulp.src('./index.html').pipe(gulp.dest('./xiangmu/dist'));
});
復(fù)制img文件
var gulp=require('gulp');
gulp.task('hello', function () {
return gulp.src('./img/*.{jpg,png}').pipe(gulp.dest('./xiangmu/dist'));
});
引用其他多個目錄中的文件
var gulp=require('gulp');
gulp.task('hello', function () {
return gulp.src(['a/.html','b/.html']).pipe(gulp.dest('./xiangmu/dist'));
});
排除其它的文件
var gulp=require('gulp');
gulp.task('hello', function () {
return gulp.src(['./a/*','!./a/a.less']).pipe(gulp.dest('./xiangmu/dist'));
});
同時執(zhí)行幾個任務(wù)
gulp.task('build',['myhtml','mycss'], function () {
console.log('aaaaaaaaa');
});
監(jiān)聽任務(wù)
gulp.task('watch', function () {
gulp.watch('a/*',['hello']);
});
使用插件來擴展gulp的功能
Sass插件
npm install gulp-sass --save-dev
gulp.task('mysass', function () {
return gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest('./xiangmu/cc'))
});
less插件
npm install gulp-less --save-dev
gulp.task('myless', function () {
return gulp.src('./a/*.less').pipe(less()).pipe(gulp.dest('./xiangmu/less'));
});
構(gòu)建服務(wù)器
npm install gulp-connect --save-dev
gulp.task('server', function () {
connect.server({
root:'dist'
});
});
瀏覽器實時刷新
npm install gulp gulp-livereload --save-dev
在server服務(wù)中添加livereload:true（啟動實時刷新的功能）
在要實現(xiàn)刷新的文件中添加.pipe(connect.reload())
合并文件
npm install gulp-concat --save-dev
gulp.task('myjs', function () {
return gulp.src(['js/a.js','js/b.js']).pipe(concat(‘a(chǎn)b.js’)).pipe('./xiangmu/js');
});
Js壓縮文件
npm install gulp-uglify --save-dev
gulp.task('uglifyjs', function(){
gulp.src('js/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'))
});
Css文件壓縮
npm install gulp-minify-css --save-dev
npm install gulp-clean-css --save-dev
cssmin = require('gulp-minify-css');
gulp.task('myminifycss', function () {
gulp.src('css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('dist/css'));
});
html文件壓縮
npm install gulp-minify-html --save-dev
minifyHtml = require("gulp-minify-html");
gulp.task('myminifyhtml', function () {
gulp.src('*.html') // 要壓縮的html文件
.pipe(minifyHtml()) //壓縮
.pipe(gulp.dest('dist/html'));
});
重命名
npm install gulp-rename --save-dev
.pipe()
圖片優(yōu)化
npm install gulp-imagemin --save-dev
.pipe()
