gulp | Sonder

安装

安装gulp:前提先安装node.js环境然后在进行如下安装
npm install gulp -g 全局安装
npm install gulp --save-dev 安装依赖

初始化工程：

新建文件夹
1. mkdir 文件夹名称
2. cd 命令进入工程文件夹下
3. 创建package.json文件
4. 手动创建或者命令创建
5. npm init输入相关信息
  然后发现没有gulp 这个时候就需要输入
  npm install gulp --save-dev 然后出现一个node_modules/ 文件夹
有配置文件的话直接输入npm install就可以了

创建任务

在根目录下创建一个文件 gulpfile.js
var gulp = require("gulp"); // 引入
gulp.task("hello"，function（） { //第一个参数是任务名，第二个是执行的任务功能 })
写完之后，在文件所在目录打开cmd 输入gulp hello //(文件名)

gulp.task(“default”,function(){}) 有回调函数，但也可以定义数组
gulp.task(“default”,[‘hello’ , …]);数组里放任务名，这样在cmd里直接键入 gulp即可执行

gulp.src()可以找出将要处理的文件，然后pipe()去处理这些找到的文件。pipe()可以理解为管道，每个管道就可以指定它的功能，最后使用gulp.dest()来放到指定的地方

使用gulp来实现文件的copy

首先在我们工程目录下新建一个测试使用的index.html, 然后写入相应的内容
在我们的gulpfile.js文件中输入以下内容：
var gulp = ("gulp")
gulp.task("copyHtml",function(){ gulp.src("index.html").pipe(gulp.dest("dist")); })
以上代码是首先引入gulp工具，创建任务，任务名是“copyHtml”,找到文件名，这个文件，名可以是这样" *.html"(所有.html的文件)，然后处理，复制到dist这个文件名下，如果没有则会生成一个“dist”的目录，一般这里时网站根目录，里面的文件不做修改，只在源码中做修改；
最后在环境中执行 gulp copyHtml就可以了 OR gulp.task(“default”,[“copyHtml”]) ,然后直接 gulp；

拷贝图片文件，从某一个工程下面拷贝图片到指定的地方，类似于上一个方法；

两个文件夹同时拷贝到某一个文件夹下
gulp.task("data", function(){ gulp.src(["js/*.js" , "json/*.json"]).pipe(gulp.dest("dist/data")); })
将js文件下所有的js文件和json下的所有的json文件放到dist目录下的data文件里；

另外排除文件拷贝
gulp.task(‘data’,function(){
return gulp.src([‘xml/.xml’,‘json/.json’ , ‘!json/b.json’ ]).pipe(gulp.dest(‘dist/ data’));
})
!json/b.json排除某个文件

多个任务执行

gulp.task("build" , ["hello","copyHtml","data"])

在中括号后也可加上回调函数，例如function（）{ console.log(“编译成功”)}；

侦测文件变化实时更新

gulp.task("watch",function(){ gulp.watch("index.html",["copyHtml"]); gulp.watch("imags/**/*.{jpg,png}","[imags]") })
解读：使用此方法名 gulp.watch（“index.html”，[“copyHtml”]），第一个参数是文件，第一个参数是任务名将此任务放到“default”，实时侦测更新

Gulp插件 : 访问网站 http://gulpjs.com/plugins
如果npm安装失败可尝试cnpm进行安装 => 淘宝镜像：（npm install -g cnpm --registry=https://registry.npm.taobao.org）;
gulp sass ：命令行安装依赖 npm install gulp-sass --save-dev
安装好插件后，首先引入 const sass = require(“gulp-sass”);
gulp.task(“sass”,function(){
gulp.src(“test.scss”) //找到文件
.pipe(sourcemaps.init())
.pipe(sass({outputStyle:“compressed”})) //压缩格式
.pipe(sourcemaps.write())
.pipe(gulp.dest(“dist/css”));
})
解读：创建任务，先找到scss文件，执行sass()方法转换成css文件，再拷贝给dist下css文件名里；
其中 sourcemaps.init() sourcemaps.write() ；是为了在实际开发中，将浏览器里的样式变为scss文件，这样只要在scss里开发代码就行了，将sass功能写在“default”里，这样实时更新css里代码当然，要先安装gulp-sourcemaps 然后引入

gulp.connect 搭建本地服务

安装gulp.connect : npm install gulp-connect --save-dev
然后引入 const connect = require("gulp-connect");
创建一个任务：
gulp.task("server" , function(){ connect.server({ root : "dist" , // 网站根目录 livereload : true }) })
安装好，写以上代码，将此任务，写到 “default”默认里时刻监听；

修改文件后页面自动刷新
注意：实时监听，文件内容的变化，从而根目录下的copy文件也实时更新，但是页面实时更新是要在最后加入
pipe(connect.reload())
这个方法加在需要改变的任务里，比如所有的html文件，比如所有的css文件，比如所有的js文件

合并文件插件gulp-concat:

// 命令行安装 npm install gulp-concat --save-dev 
// 在gulpfile.js 中写入：
var concat = require('gulp-concat'); 
gulp.task('concat',function(){ 
	 gulp.src(['js/a.js','js/b.js'])
	.pipe(concat('main.js'))
	.pipe(gulp.dest('dist/js'));
 })

将合并js文件进行压缩gulp-uglify

// 命令行安装 npm install gulp-uglify --save-dev 
// 在gulpfile.js 中
var uglify = require('gulp-uglify');
gulp.task('uglify',function(){ 
	 gulp.src(['js/a.js','js/b.js']) 
	.pipe(concat('main.js')) 
	.pipe(uglify())
	.pipe(gulp.dest('dist/js')); 
})

安装gulp-rename插件

   // 命令行安装 npm install gulp-rename --save-dev
   var rename = require('gulp-rename');
   gulp.task('rename',function(){ 
   return gulp.src(['js/a.js','javascripts/b.js']) 
   .pipe(concat('main.js')) 
   .pipe(gulp.dest('dist/js')) 
   .pipe(uglify())
   .pipe(rename('main.min.js')) 
   .pipe(gulp.dest('dist/js'));
})

如何压缩css

npm install gulp-sass --save-dev
// 命令行安装 
npm install gulp-clean-css --save-dev
var cleanCss = require('gulp-clean-css'); 
gulp.task('cleanCss',function(){ 
return gulp.src('stylesheet/**/*.scss') 
 .pipe(sass())
 .pipe(cleanCss ())
 .pipe(gulp.dest('dist/css'));
})

将ES6转换成ES5


npm install babel-cli --save-dev  npm install babel-preset-es2015 --save-dev
npm view *** versions
// 安装插件npm install  gulp-babel  --save-dev
gulp.task("babel", function () {  
    return gulp.src("ES6.js")  
    .pipe(babel({“presets”:[“es2015”]}))  
    .pipe(gulp.dest("dist/js"));  
});

安装