es6環境搭建

轉自 http://blog.csdn.net/qq_29676303/article/details/76098196

注意 事項
1.es6下建立三個目錄
app
server
tasks

2.在 app下 建立
css
js
views

3.進入app/js目錄
建立index.js（js入口文件）
4.進入app/views
建立(注：ejs是一個模板引擎，在node中須要啓動)
error.ejs
index.ejs

5.進入到 es6/server/
使用node的腳手架
啓動腳手架 表示啓用ejs模板引擎
express -e .
執行npm install

6.進入到es6/tasks
建立util（防止一些經常使用的腳本的）
初始化 tasks/util/args.js

7.在項目根目錄
使用npm init (建立 package.json 依賴包文件（配置依賴）)

8.建立設置babel 編譯工具配置文件
 es6/.babelrc

9.建立gulp的構建文件
es6/gulpfile.babel.js


10.編輯 tasks/util/args.js

                    import yargs from 'yargs';

                    const args = yargs
//區分開發環境或者線上環境（gulp -production）
                    .option('production',{
                    boolean:true,
                    default:false,
                    describe:'min all scripts'
                    })
//設置要不要自動編譯
                    .option('watch',{
                    boolean:true,
                    default:false,
                    describe:'watch all files'
                    })
//設置是否須要輸出編譯日誌
                    .option('verbose',{
                    boolean:true,
                    default:false,
                    describe:'log'
                    })
//處理壓縮的
                    .option('sourcemaps',{
                    describe:'force the creation of sroucemaps'
                    })
//設置服務的端口
                    .option('port',{
                    string:true,
                    default:8080,
                    describe:'server port'
                    })
//表示名兩行輸入的上述內容以字符串進行解析
                    .argv

                    export default args;

11.建立構建腳本tasks/scripts.js

                    import gulp from 'gulp';//引入gup
                    import gulpif from 'gulp-if';//gulp的語句中處理if判斷的包
                    import concat from 'gulp-concat';//處理文件拼接的
                    import webpack from 'webpack';//打包的
                    import gulpWebpack from 'webpack-stream';//和webpack配合使用的
                    import named from 'vinyl-named';//對文件重命名處理包
                    import livereload from 'gulp-livereload';//熱更新包即瀏覽器不刷新自動更新的
                    import plumber from 'gulp-plumber';//處理文件信息流的包
                    import rename from 'gulp-rename';//對文件重命名的包
                    import uglify from 'gulp-uglify';//處理js css 壓縮的包
                    import {log,colors} from 'gulp-util';//命令行輸出的包
                    import args from './util/args';//命令行參數進行解析的包

進入es6/
安裝scripts.js 中的依賴包用空格隔開
npm install gulp gulp-if gulp-concat webpack webpack-stream vinyl-named gulp-livereload gulp-plumber gulp-rename gulp-uglify gulp-util yargs --save-dev
gulp-live-server gulp-util del gulp-sequence --save-dev(表示安裝後寫入package.js配置)

12.建立處理模板的腳本
                    tasks/pages.js
                    import gulp from 'gulp';
                    import gulpif from 'gulp-if';
                    import livereload from 'gulp-livereload';
                    import args from './util/args';


                    //建立一個pages任務
                    gulp.task('pages',()=>{
                    return gulp.src('app/**/*.ejs')//表示app嵌套目錄下全部模板
                    .pipe(gulp.dest('server'))//把末班文件原封不動的copy到server目錄下
                    .pipe(gulpif(args.watch,livereload()))//監聽是否是熱更新
                    })
13.
建立處理css的腳本
                    import gulp from 'gulp';
                    import gulpif from 'gulp-if';
                    import livereload from 'gulp-livereload';
                    import args from './util/args';

                    gulp.task('css',()=>{
                    return gulp.src('app/**/*.css')
                    .pipe(gulp.dest('server/public'))//把末班文件原封不動的copy到server/public目錄下

                    })


14.建立處理服務器的構建腳本tasks/server.js
                import gulp from 'gulp';
                import gulpif from 'gulp-if';
                import liveserver from 'gulp-live-server';
                import args from './util/args';
//建立服務的任務
                gulp.task('serve',(cb)=>{//若是不是監聽的使用回調函數
                if(!args.watch) return cb();
//若是是監聽的建立一個服務器，運行server/bin/www.js
                var server = liveserver.new(['--harmony','server/bin/www']);
                server.start();//啓動服務器
//監聽server/public/js  /css
                gulp.watch(['server/public/**/*.js','server/views/**/*.ejs'],function(file){
                server.notify.apply(server,[file]);//通知服務器作相應的反應
                })
//監聽到路由變化後是服務重啓
                gulp.watch(['server/routes/**/*.js','server/app.js'],function(){
                server.start.bind(server)()
                });
                })

15.建立瀏覽器監聽並自動編譯的腳本tasks/browser.js
                    import gulp from 'gulp';
                    import gulpif from 'gulp-if';
                    import gutil from 'gulp-util';
                    import args from './util/args';
//建立任務
                    gulp.task('browser',(cb)=>{
                    if(!args.watch) return cb();
                    gulp.watch('app/**/*.js',['scripts']);//監聽js 啓動scripts.js
                    gulp.watch('app/**/*.ejs',['pages']);...
                    gulp.watch('app/**/*.css',['css']);...
                    });
16.建立編譯文件清除的腳本（當每次文件修改時進行舊的文件清除）
                import gulp from 'gulp';
                import del from 'del';
                import args from './util/args';
    //建立晴空任務
                gulp.task('clean',()=>{
                return del(['server/public','server/views'])
                })

17.建立任務關聯起來的腳本tasks/build.js
                import gulp from 'gulp';
                import gulpSequence from 'gulp-sequence';//任務之間的關聯關係

                gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));

18.建立 tasks default.js

        import gulp from 'gulp';

        gulp.task('default',['build']);

19.運行處理
報錯
[18:10:18] Failed to load external module babel-register
[18:10:18] Failed to load external module babel-core/register
[18:10:18] Failed to load external module babel/register
[18:10:18] Using gulpfile D:\wnmp\www\es6\gulpfile.babel.js
[18:10:19] Task 'default' is not in your gulpfile
[18:10:19] Please check the documentation for proper gulpfile formatting

解決前三個是安裝包沒有安裝
解決安裝
babel-loader babel-core babel-preset-env webpack

後一個是沒有發現gulpfile文件，建立的是gulpfile.babel.js
解決
在 es6/gulpfile.babel.js下寫入並安裝require-dir包
import requireDir from 'require-dir';

requireDir('./tasks');

配置 .babelrc 以下 同時安裝依賴包 babel-preset-es2015
{
"presets":["es2015"]
}

報錯
安裝依賴包
gulp-sequence


運行 gulp --watch 自動編譯
實現熱更新 在server/app.js 大概23行
在app.use(express.static(path.join(__dirname, 'public')));後添加
app.use(require('connect-livereload')());
ctrl+c中止服務
安裝依賴
npm install connect-livereload --save-dev

執行 gulp --watch

報錯以後：(1)  tasks/scripts.js中 loader:'babel'改爲loader:'babel-loader'  //新版的webpack不容許縮寫，因此須要寫完整
        (2)  server/app.js中在最下面加上 module.exports = app;
        (3)  server/bin/www中var port = normalizePort(process.env.PORT || '3000');改爲var port = normalizePort(process.env.PORT || '8080');   //3000是默認端口，容易被佔用，因此改爲8080或其餘
        (4)  安裝require-dir
        (5)  tasks/util/args.js最後加上export default args;git 地址https://github.com/XjsByme/es6-源碼