gulp

简单介绍

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()

作者：河湾欢儿

链接：http://www.jianshu.com/p/bbb51a414be1

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。