gulp
|
|
|
|
gulp使用方法
- 1.全局安装gulp
- 2.在当前目录下创建一个gulp的配置文件gulpfile.js里面可以定义gulp任务
- 3.在命令行中执行gulp 任务名(如:gulp js)
|
|
安装babel
|
|
使用预设
npm install babel-preset-es2015
npm install babel-preset-es2016
npm install babel-preset-vue
npm install babel-preset-react
1234 <!-- .babelrc 文件中 -->{"presets": ["es2015"]}
reduce
- item为每一项
- curr初始值为第二个参数的值12345678910111213141516171819var attrs = [1,2,3];var r = attrs.reduce(function(curr,item){console.log('item'+item);console.log('curr'+curr);console.log(curr*2 + item)return curr*2 + item;},0)console.log(r);<!-- 输出结果 -->item1curr01item2curr14item3curr41111
gulp npm install gulp –save-dev
- 通过require可以把gulp模块引入当前项目并赋值给gulp变量 这样gulp这个变量里面就会拥有gulp的所有的方法了1var gulp = require('gulp');
gulp.task(参数1,参数2):创建一个任务
|
|
gulp.src(‘./app/index.html’)src得到的是一个可读流,获取到想要处理的文件流
|
|
|
|
gulp.dest(‘./build/index.html’) 复制
|
|
gulp.js工作方式
|
|
|
|
watch监听
|
|
事件类型,1.added(这个没有效果) 2.deleted 3.changed
|
|
|
|
api完成代码
|
|
gulp插件:gulp提供了很多借口,但是本身并不能做太多的事情,其他实用的功能都是依靠插件来进行扩展的
gulp-less插件可以把less文件编译成css .pipe(less()),里面没有参数
- npm install gulp-less –save-dev1234567891011<!-- css -->var gulp = require('gulp');var less = require('gulp-less');gulp.task('css',function(){gulp.src('./app/less/*.less')//*******less.pipe(less()).pipe(gulp.dest('./build/css'));//*******css});gulp.task('watch',function(){gulp.watch('./app/less/*.less',['css'])})
gulp-concat把几个文件合并到一块
- npm install gulp-concat –save-dev123var concat = require('gulp-concat');//把多个文件合并成一个文件并指定合并后的文件名.pipe($.concat('all.js'))
gulp-uglify对js文件进行压缩,此插件不能压缩es6,需要编译成es5在压缩
- npm install gulp-uglify –save-dev12var uglify = require('gulp-uglify');.pipe($.uglify())
gulp-clean-css对css文件进行压缩
- npm install gulp-clean-css –save-dev12var cleanCss = require('gulp-clean-css');.pipe($.cleanCss())
gulp-minify-html 对html文件进行压缩
- npm install gulp-minify-html –save-dev12var minifyHtml = require('gulp-minify-html');.pipe($.minifyHtml())
gulp-rename在把处理好的文件存放的指定位置之前,我们可以先重命名一下它
- npm install gulp-rename –save-dev1234var rename = require('gulp-rename');//再重命名为'all.min.js'<!-- 可以为字符串 -->.pipe($.rename('all.min.js'))
|
|
gulp-connect 有时候我们需要把文件放到本地服务器上去预览,他可以帮我们创建一个本地的服务器去运行我们的项目
- npm install gulp-connect –save-dev12345678gulp.task('serve',function(){//启动HTTP服务$.connect.server({port:8080,//端口号root:'./build',//服务器的根目录livereload:true//服务启动自动刷新});});
gulp-load-plugins自动加载所有的插件
- npm install gulp-load-plugins –save-dev123var $ = require('gulp-load-plugins')();//再重命名为'all.min.js'.pipe($.rename('all.min.js'))
gulp-babel:可以使用此插件吧es6的代码编译成es5代码
- npm install gulp-babel –save1234567var gulp = require('gulp');var $ = require('gulp-load-plugins')();gulp.task('js',function(){gulp.src('./app/js/es6.js').pipe($.babel({presets:["es2015"]})).pipe(gulp.dest('./build/js'))});
gulp-inject 动态自动插入生成后的js和css文件到html
- npm install gulp-inject –save-dev12345678910111213var gulp = require('gulp');var $ = require('gulp-load-plugins')();gulp.task('html',function(){//要插入的目标文件流var target = gulp.src('./app/index.html');//将要被插入的资源var source = gulp.src(['build/css/all.min.css','build/js/all.min.js']);target//ignorePath:'build':忽略build路径//addRootSlash:false:是否添加跟斜线(/).pipe($.inject(source,{ignorePath:'build',addRootSlash:false})).pipe(gulp.dest('./build'))});
gulp-load-plugins实现原理
|
|
Object.keys(dev)是把dev对象的属性名转换为数组
|
|
js
|
|
css
|
|
html
|
|
server 实现自动刷新
|
|