使用gulp编译es6 , less 代码

传统的js代码是不支持箭头函数 和 es6的继承特性的  写个类 ， 继承还要写个闭包 ， call ， prototype。。菜鸟的我 表示挺麻烦的 挺麻烦的

这个只是把幕课网上配置的视频简化成文字 ，  下次使用的时候不用再次打开视频

 

1.新建项目文件  src  src目录下新建 css js less gulpfile.js webpack.config.js文件   www目录下新建css  js  index.html文件

2.初始化项目 npm init , 安装依赖 cnpm install babel-core babel-loader babel-present-es2015 gulp gulp-less gulp-util webpack-stream --save-dev

3.编写gulp编译的配置文件 ， 

const gulp = require("gulp");
const webpack = require('webpack-stream');

gulp.task('webpack' , () => {
    //转译javascript
    //webpack 配置
    const config = require('./webpack.config.js');
    gulp.src('./js/**/*.js')
        .pipe(webpack(config))
        .pipe(gulp.dest('../www/js'));
})

gulp.task('less' , () => {
    const less = require('gulp-less');
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('../www/css'));
});

gulp.task('default' , ['webpack' , 'less']);

gulp.task('watch' , () => {
    gulp.watch('less/**/*.less' , ['less']);
    gulp.watch('js/**/*.js' , ['webpack']);
})

 

4.编写webpack的配置文件

module.exports = {
    entry:{
        index:'入口文件'
    },
    output:{
        filename:"[name].js"
    },
    devtool:'source-map',
    resolve:{
        extensions:['.js']
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules$/,
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
}