简单介绍
gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp，使用npm首先得配置node环境
Install
npm install gulp-cli -g 全局安装gulp
gulp --help 返回帮助信息
package.json
npm init 初始化npm
npm install gulp gulp-util --save-dev //从本地把整个gulp文件夹拉过来
task
创建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())处理好的文件放到指定地方
复制html文件
var gulp=require('gulp');
gulp.task('hello', function () {
return gulp.src('./index.html').pipe(gulp.dest('./xiangmu/dist'));
});
复制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'));
});
同时执行几个任务
gulp.task('build',['myhtml','mycss'], function () {
console.log('aaaaaaaaa');
});
监听任务
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'));
});
构建服务器
npm install gulp-connect --save-dev
gulp.task('server', function () {
connect.server({
root:'dist'
});
});
浏览器实时刷新
npm install gulp gulp-livereload --save-dev
在server服务中添加livereload:true（启动实时刷新的功能）
在要实现刷新的文件中添加.pipe(connect.reload())
合并文件
npm install gulp-concat --save-dev
gulp.task('myjs', function () {
return gulp.src(['js/a.js','js/b.js']).pipe(concat(‘ab.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()
图片优化
npm install gulp-imagemin --save-dev
.pipe()
网友评论