gulp用法

 gulp 安装:
(1): npm install gulp -g          [全局安装]
(2): npm install gulp --save-dev   [安装依赖]
(3): npm install gulp-sass --save-dev  [sass插件]
(4): npm install gulp-connect --save-dev  [插件搭建本地服务]
(5): npm install gulp-concat --save-dev  [合并插件]
(6): npm install gulp-uglify --save-dev  [合并js文件进行压缩]
(7): npm install gulp-rename --save-dev   [保留前后压缩两个文件]
(8): [npm install gulp-sass --save-dev]      npm install gulp-clean-css --save-dev   [压缩css]
(9): npm install gulp-imagemin --save-dev   [对图片进行压缩]
(10):npm install gulp-sourcemaps --save-dev
(11):npm install babel-cli --save-dev    
     npm install babel-preset-es2015 --save-dev
     npm install  gulp-babel  --save-dev      [es6转换es5]

gulpfile.js配置文件

const gulp=require("gulp");
//引入gulp
const sass=require("gulp-sass");
//引入编译sass
const connect=requeir("gulp-connect");
//搭建本地服务器
const concat=requeir("gulp-concat");
//合并文件
const uglify=requeir("gulp-uglify");
//压缩js文件
const rename=requeir("gulp-rename");
//重命名
const cleanCss=requeir("gulp-clean-css");
//压缩css文件
const imagemin=requeir("gulp-imagemin");
//压缩图片
const babel=requeir("gulp-babel");
//es6转es5环境

/*task创建 有两个参数
第一个参数为任务名，第二个参数为任务所要执行的代码
gulp.tast("start",function(){
	console.log("aaa")
})
从第一个地方复制到另一个地方
gulp.src().pipe(gulp.dest()) 
默认任务
gulp.tast("default",["",""]);
排除文件
gulp.task('data',function(){ 
	return 	gulp.src([‘xml/*.xml’,‘json/*.json’,'!json/b.json']).pipe(gulp.dest('dist/	data'));
 })
多任务执行
gulp.task('build',['copy-index','images','data'],function(){
	 console.log('编译成功');
 }) 
侦测文件
gulp.task('watch',function(){
	 gulp.watch('index.html',['copy-index']); 	gulp.watch('images/**/*.{jpg,png}',['images']); 	gulp.watch(['xml/*.xml','json/*.json','!json/secret.json'],['data']);
 }) 
搭建本地服务器 
gulp.task('sever',function(){ 
	connect.server({root:'dist'});
})  

自动刷新
gulp.task('sever',function(){
	 connect.server(); 
	sever()方法介绍 
	配置文档根目录 
	connect.server({ 
		root:‘dist’,
		livereload:true 
	}); 
})

然后在我们copy任务中添加

gulp.task('copy-index',function(){ 
	return gulp.src('index.html').pipe(gulp.dest(‘dist')).pipe(connect.reload());
 })
gulp.task('watch',function(){ 
	gulp.watch('index.html',['copy-index']); 
})
 
然后创建一个 
gulp.task('default',['sever','watch']); 

最后执行 gulp default命令

重命名
var rename = require('gulp-rename');
 gulp.task('scripts',function(){ 
return gulp.src(['javascripts/avalon.js','javascripts/index.js']) 
.pipe(concat('vendor.js')) 
.pipe(gulp.dest('dist/js')) 
.pipe(uglify())
 .pipe(rename('vendor.min.js')) 
.pipe(gulp.dest('dist/js'));
 }) 
es6转es5
npm install babel-cli --save-dev  npm install babel-preset-es2015 --save-dev
安装插件npm install  gulp-babel  --save-dev
 
gulp.task("default", function () {  
        return gulp.src("app.js")  
          .pipe(babel({“presets”:[“es2015”]}))  
          .pipe(gulp.dest("lib"));  
      }); 
执行命令 gulp 

压缩css
npm install gulp-sass --save-dev

命令行安装 npm install gulp-clean-css --save-dev

var cleanCss = require('gulp-clean-css'); 

gulp.task(‘sass',function(){ 
return gulp.src('stylesheet/**.sass') 
 .pipe(sass())
 .pipe(cleanCss ())
.pipe(gulp.dest('dist/css'));
 }) 

js压缩
在gulpfile.js 中

var uglify = require('gulp-uglify');
gulp.task('scripts',function(){ 
	return gulp.src(['javascripts/avalon.js','javascripts/index.js']) 
	.pipe(concat('vendor.js')) 
	.pipe(uglify())
	.pipe(gulp.dest('dist/js')); 
}) 
文件合并
在gulpfile.js 中

var concat = require('gulp-concat'); 
gulp.task('scripts',function(){ 
	return gulp.src(['javascripts/avalon.js','javascripts/index.js'])
	.pipe(concat('vendor.js'))
	.pipe(gulp.dest('dist/js')); }) 

sass编译
var sass = require('gulp-sass'); 
gulp.task('sass',function(){
	return gulp.src('stylesheet/**.scss')
	.pipe(sass())
	.pipe(gulp.dest('dist/css'))
 })
*/
//路径指向源文件
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
 return gulp.src('./sass/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./css'));
});