gulp 相关

 

 

全局安装gulp

npm install –global gulp

 

基本语法

gulp.task('A' , function(){
   console.log('A') 
});
gulp.task('B' , ['A'] , function(){ //运行B之前先去运行A
   console.log('B')
});

fn:类型(必填)：Function 该任务调用的插件操作

 

2.gulp.src(globs[, options])

说明：src方法指定需要处理的源文件路径，返回当前文件流至可用插件

globs: 类型(必填)：String/StringArray  需要处理的源文件匹配符路径

通配符路径匹配示例：

　　“src/a.js”：指定具体文件；

　　“*”：匹配所有文件    例：src/*.js(包含src下的所有js文件)；

　　“**”：匹配0个或多个子文件夹    例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

　　“{}”：匹配多个属性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

　　“!”：排除文件    例：!src/a.js(不包含src下的a.js文件)；

options:类型(可选)：Object 三个属性 buffer read base

　　options.buffer：类型：Boolean  默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

　　options.read：  类型：Boolean  默认：true 设置false，将不执行读取文件操作，返回null；

　　options.base：  类型：String  设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.src('client/js/**/*.js') 
2   .pipe(minify())
3   .pipe(gulp.dest('build'));  // Writes 'build/somedir/somefile.js'
4  
5 gulp.src('client/js/**/*.js', { base: 'client' })
6   .pipe(minify())
7   .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

　　

gulp.dest(path[,options])

说明：处理完后文件输出的路径

path：类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可

options：  类型(可选)：Object，有2个属性cwd、mode；

　　options.cwd：  类型：String  默认：process.cwd()：前脚本的工作目录的路径 当文件输出路径为相对路径将会用到；

　　options.mode：  类型：String  默认：0777 指定被创建文件夹的权限；

 

gulp.watch(glob[,opts],tasks) or gulp.task(glob [,opts ,cd])

说明：watch方法用于监听文件变化，一被变化就执行指定任务

glob：  需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

opts：  类型(可选)：Object 具体参看https://github.com/shama/gaze；

tasks：  类型(必填)：StringArray 需要执行的任务的名称数组；

cb(event)：  类型(可选)：Function 每个文件变化执行的回调函数；

 

gulp使用

import gulp from 'gulp'; //引入gulp
import gulpLoadPlugins from 'gulp-load-plugins'; //自动加载插件 省去一个一个require进来
import browserSync from 'browser-sync'; //浏览器同步
import {stream as wiredep} from 'wiredep'; //把bower 下载的文件引入到html文件中
const $ = gulpLoadPlugins();
const reload = browserSync.reload;

 

es6转码并压缩　

gulp.task('script',()=>{
	gulp.src('js/es6.js')
	// es6转es5
	.pipe(babel({
        presets: ['es2015']
    }))
	// 压缩
	.pipe(uglify())
		// 错误提示
	.on('error', function(err) {
            gutil.log(gutil.colors.red('[Error]'), err.toString());
    })
	.pipe(gulp.dest('dist/js'));
})

 

clean使用

gulp.task('clean' , function(){
   return gulp.src([
      'dist', //删除dist整个文件夹
      'dist/test/**/*', //删除dist下的test写任意子文件夹里的文件
      '!package.json'  //不删除package.json文件
     ] )
　　　.pipe($.clean());
});

　　

压缩图片

gulp.task('images',()=>{
    return gulp.src('app/images/**/*')
         .pipe ($.cache ($.imagemin ({ //使用cache只压缩改变的图片
              optimizationLevel: 3,         //压缩级别
              progressive: true, 
              interlaced: true})
         )).pipe (gulp.dest ('dist/images'));
});