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