• 构建gulp项目


    express是node.js中的构建工具,如果需要使用express构建,首先需要安装express。

    构建一个项目:

    |-- app
    | |-- css
    | |-- js
    | | `-- class
    | | |-- index.js
    | | `-- test.js
    | `-- views
    | |-- error.ejs
    | `-- index.ejs

    |-- server

    |-- tasks

    在构建完该目录后,在根目录上使用npm init -y,构建package.json文件,sudo cnpm install -g express-generator命令安装express(新版express存在在express-generator包中)然后进入server目录,通过express -e .   命令构建脚手架,其中 -e表示构建一级模板引擎

    然后执行 cd . && npm install  

    回到构建目录:

    cd ../tasks/

    mkdir util

    touch util/args.js

    回到根目录

    touch .babelrc(使用babel时使用)

    touch gulpfile.babel.js (接下来使用ES6语法,所以需要创建gulpfile.babel.js文件)

    进入args.js文件,引入一个包

    import yargs from 'yargs';
    
    const args = yargs
    
        .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;
    View Code

    touch tasks/scripts.js

    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import concat from 'gulp-concat';
    import webpack from 'webpack';
    import gulpWebpack from 'webpack-stream';
    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';
    import {log,colors} from 'gulp-util';
    import args from './util/args';
    View Code

    使用

    cnpm install gulp gulp-if gulp-concat webpack webpack-stream  gulp-plumber gulp-rename gulp-uglify gulp-util gulp-livereload vinyl-named yargs --save-dev

    等安装完毕后,重新进入scripts.js文件,编写:

    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import concat from 'gulp-concat';
    import webpack from 'webpack';
    import gulpWebpack from 'webpack-stream';
    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';
    import {log,colors} from 'gulp-util';
    import args from './util/args';
    
    gulp.task('scripts',()=>{
        return gulp.src(['app/js/index.js'])
            .pipe(plumber({
                errorHandle:function(){
    
                }
            }))
            .pipe(named())
            .pipe(gulpWebpack({
                module:{
                    loaders:[{
                        test:/.js$/,
                        loader:'babel'
                    }]
                }
            }),null,(err,stats)=>{
            log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
        chunks:false
    }))
    })
    .pipe(gulp.dest('server/public/js'))
        .pipe(rename({
            basename:'cp',
            extname:'.min.js'
        }))
        .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
        .pipe(gulp.dest('server/public/js'))
        .pipe(gulpif(args.watch,livereload()))
    })
    View Code

    touch tasks/pages.js

    import gulp from 'gulp';
    import gulpif from 'gulp-if';
    import livereload from 'gulp-livereload';
    import args from './util/args';
    
    gulp.task('pages',()=>{
        return gulp.src('app/**/*.ejs')
            .pipe(gulp.dest('server'))
            .pipe(gulpif(args.watch,livereload()))
    })
    View Code

    touch tasks/css.js

    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'))
    })
    View Code

    touch 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();
    
    var server = liveserver.new(['--harmony','server/bin/www']);
    server.start();
    
    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)()
    });
    })
    View Code

    touch 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']);
        gulp.watch('app/**/*.ejs',['pages']);
        gulp.watch('app/**/*.css',['css']);
    });
    View Code

    touch tasks/clean.js

    import gulp from 'gulp';
    import del from 'del';
    import args from './util/args';
    
    gulp.task('clean',()=>{
        return del(['server/public','server/views'])
    })
    View Code

    touch tasks/build.js

    import gulp from 'gulp';
    import gulpSequence from 'gulp-sequence';
    
    gulp.task('build',gulpSequence('clean','css','pages','scripts',['browser','serve']));
    View Code

    touch tasks/default.js

    import gulp from 'gulp';
    
    gulp.task('default',['build']);
    View Code

    npm i gulp-util gulp-live-server del --save-dev

    cnpm i babel-loader babel-core babel-preset-env   babel-preset-es2015    --save-dev

    vim gulpfile.babel.js

    import requireDir from 'require-dir';
    
    requireDir('./tasks');
    View Code

    cnpm i require-dir   babel-register    babel-preset-es2015  --save-dev

    cnpm i gulp-sequence cookie-parser  epxress morgan  serve-favicon  --save-dev

    修改server/app.js文件:

    app.use(require('connect-livereload')())

    cnpm i connect-livereload  babel-polyfill --save-dev

     验证:

    http://loalhost:3000

  • 相关阅读:
    实验三
    第四次实验
    作业
    第二次实验
    <转>JVM调优
    SQL Server的聚集索引和非聚集索引
    去除DataTable里面重复的数据
    sql server 与 Excel 导入导出
    C#学习笔记 委托和事件
    好多特效
  • 原文地址:https://www.cnblogs.com/xiaopi-python/p/8176323.html
Copyright © 2020-2023  润新知