gulp 开发时常用的命令

Posted 2020-09-07 ALHH

项目开发中，管理代码gulp工具，其中常用的命令有

1.提交代码  git add .   //提交所有文件

　　　　　　git commit -m "解决的bug描述"

　　　　　　git pull origin develop（当前的分支） //拉改动的代码　　

　　　　　　git  push origin develop  //把代码推上去

2.分支  

　　1)新建分支  git branch Release（新建的分支）

　　2)切换分支  git checkout develop （切换到develop分支）

　　3)合并分支  git merge Release （在develop分支下，将Release分支的代码合并到develop下）

　　　　　　　　git push origin develop （最后要提交一下）

提醒：合并之前要git status检查是否有未提交的文件，然后再合并，不然容易出现冲突

3.gulp打包文件，一般项目准备上线时候，需要把项目打包，首先配置服务

(1).npm config set registry https://registry.npm.taobao.org
(2).npm install
(3).gulp clean

(4)gulp build

(5)提交代码的四个步骤 git add . 。。。。。。。。

var gulp = require(‘gulp‘);
var connect = require(‘gulp-connect‘);
var proxy = require(‘http-proxy-middleware‘);
var inject = require(‘gulp-inject‘);
var ngAnnotate = require(‘gulp-ng-annotate‘);
var stripDebug = require(‘gulp-strip-debug‘);
var uglify = require(‘gulp-uglify‘);
var concat = require(‘gulp-concat‘);
var imagemin = require(‘gulp-imagemin‘);
var htmlmin = require(‘gulp-htmlmin‘);
var runSequence = require(‘run-sequence‘);
var del = require(‘del‘);
var md5 = require(‘gulp-md5‘);
var minifyCss = require(‘gulp-minify-css‘);
var html2js = require(‘gulp-html2js‘);
var rename = require(‘gulp-rename‘);
var gzip = require(‘gulp-gzip‘);

gulp.task(‘webserver‘, function () {
    connect.server({
        root: ‘app‘,
        livereload: true,
        port: 4200,
        middleware: function (connect, opt) {
            return [
                proxy(‘/questionnaire‘, {
                    
                    target: ‘http://192.168.100.124:8081‘,
                    changeOrigin: true
                })
                // proxy(‘/Questionnaire‘,{
                //     target: ‘http://192.168.202.202:3306/‘,
                //     changeOrigin:true
                // })
            ];


        }
    });
});

var srcPath = {
    baseTemplate: ‘./app/index-origin.html‘,
    lib: {
        js: [
            "./app/lib/angular/angular.js",
            "./app/lib/jquery.min.js",
            "./app/lib/bootstrap/dist/js/bootstrap.js",
            "./app/lib/moment/moment.js",
            "./app/lib/angular-ui-router/release/angular-ui-router.js",
            "./app/lib/angular-bootstrap/ui-bootstrap-tpls.js",
            "./app/lib/angular-bootstrap/angular-locale_zh-cn.js",
            "./app/lib/angular-breadcrumb/dist/angular-breadcrumb.js",
            "./app/lib/angular-md5/angular-md5.min.js",
            "./app/lib/angular-breadcrumb/dist/angular-breadcrumb.js",
            "./app/lib/headroom.min.js",
            "./app/lib/highlight.min.js",
            "./app/lib/jquery.smoove.js",
            "./app/lib/aos.js",
            "./app/lib/fullPage.min.js",
            "./app/lib/jquery.SuperSlide.2.1.1.js"
        ],
        css: [
            "./app/css/bootstrap.css",
            "./app/css/aos.css",
            "./app/css/iconfont.css"
        ]
    },
    application: {
        js: [‘./app/js/app.js‘, ‘./app/js/**/*.js‘],
        css: [‘./app/css/css.css‘],
        template: [‘./app/templates/**/*.html‘]
    },
    images: [‘./app/img/**.*‘],
    fonts: [‘./app/fonts/*‘]
};

gulp.task(‘inject‘, function () {
    var libs = gulp.src(srcPath.lib.js.concat(srcPath.lib.css), {base: ‘./app‘, read: false});
    var application = gulp.src(srcPath.application.js.concat(srcPath.application.css), {base: ‘./app‘, read: false});

    gulp.src(‘./app/index-origin.html‘)
        .pipe(inject(libs, {relative: true, name: ‘lib‘}))
        .pipe(inject(application, {
                relative: true,
                name: ‘application‘
            })
        )
        .pipe(rename(‘index.html‘))
        .pipe(gulp.dest(‘./app‘))
});

gulp.task(‘html‘, function () {
    gulp.src(‘./app/templates/*.html‘)
        .pipe(connect.reload());
});

gulp.task(‘js‘, function () {
    gulp.src(‘./app/js/**/*.js‘)
        .pipe(connect.reload());
});

gulp.task(‘watch‘, function () {
    gulp.watch([‘./app/templates/*.html‘], [‘html‘]);
    gulp.watch([‘./app/js/**/*.js‘], [‘js‘]);
});

gulp.task(‘default‘, [‘inject‘, ‘webserver‘, ‘watch‘]);

//
// 以下为生产构建配置
//
var configuration = {
    html: {
        removeComments: true,
        removeCommentsFromCDATA: true,
        collapseWhitespace: true,
        conservativeCollapse: true,
        removeScriptTypeAttributes: true
    },
    inject: {
        lib: {
            name: ‘lib‘,
            relative: true,
            ignorePath: ‘../build‘
        },
        app: {
            name: ‘application‘,
            relative: true,
            ignorePath: ‘../build/‘
        },
        template: {
            name: ‘template‘,
            relative: true,
            ignorePath: ‘../build/‘
        }
    },
    html2js: {
        base: ‘app/‘,
        name: ‘app‘,
        useStrict: true
    },
    gzip: {
        threshold: 512,
        level: 9,
        memLevel: 2
    }
};

gulp.task(‘clean‘, function (done) {
    del(‘build/‘, done);
});

gulp.task(‘image‘, function () {
    gulp.src(srcPath.images)
        // .pipe(imagemin())
        .pipe(gulp.dest(‘build/img/‘));
});

gulp.task(‘fonts‘, function () {
    gulp.src(srcPath.fonts).pipe(gulp.dest(‘build/fonts/‘));
});

gulp.task(‘src-inject-build‘, function () {
    var honeyLibScript
        , honeyLibStylesheet
        , honeyApplicationTemplate
        , honeyApplicationScript
        , honeyApplicationStylesheet;

    honeyLibScript =
        gulp.src(srcPath.lib.js)
            .pipe(ngAnnotate())
            .pipe(concat(‘honey_lib_script.js‘))
            .pipe(uglify())
            .pipe(md5(12))
            .pipe(rename({extname: ‘.min.js‘}))
            .pipe(gulp.dest(‘./build/js/‘));

    honeyLibStylesheet =
        gulp.src(srcPath.lib.css)
            .pipe(concat(‘honey_lib_stylesheet.css‘))
            .pipe(minifyCss())
            .pipe(md5(12))
            .pipe(rename({extname: ‘.min.css‘}))
            .pipe(gulp.dest(‘./build/css/‘));

    honeyApplicationScript =
        gulp.src(srcPath.application.js)
            .pipe(ngAnnotate())
            .pipe(concat(‘honey_application_script.js‘, {newLine: ‘;‘}))
            .pipe(stripDebug())
            .pipe(uglify())
            .pipe(md5(12))
            .pipe(rename({extname: ‘.min.js‘}))
            .pipe(gulp.dest(‘./build/js/‘));

    honeyApplicationStylesheet =
        gulp.src(srcPath.application.css)
            .pipe(concat(‘honey_application_stylesheet.css‘))
            .pipe(minifyCss())
            .pipe(md5(12))
            .pipe(rename({extname: ‘.min.css‘}))
            .pipe(gulp.dest(‘./build/css/‘));

    honeyApplicationTemplate =
        gulp.src(srcPath.application.template)
            .pipe(htmlmin(configuration.html))
            .pipe(html2js(‘honey_template_script.js‘, configuration.html2js))
            .pipe(uglify())
            .pipe(md5(10))
            .pipe(rename({extname: ‘.min.js‘}))
            .pipe(gulp.dest(‘./build/js/‘));

    gulp.src(srcPath.baseTemplate)
        .pipe(inject(honeyLibScript, configuration.inject.lib))
        .pipe(inject(honeyLibStylesheet, configuration.inject.lib))
        .pipe(inject(honeyApplicationScript, configuration.inject.app))
        .pipe(inject(honeyApplicationStylesheet, configuration.inject.app))
        .pipe(inject(honeyApplicationTemplate, configuration.inject.template))
        // .pipe(htmlmin(configuration.html))
        .pipe(rename({
            basename: ‘index‘
        }))
        .pipe(gulp.dest(‘./build/‘));
});

gulp.task(‘build‘, function () {
    runSequence([‘image‘, ‘fonts‘, ‘src-inject-build‘]);
});

4.一般提交到测试的分支代码不能更改，如果要修复bug，只能切另一个分支出来修改，如果不小心在提交的分支上改了东西，

git status 查看 哪些东西修改了

git checkout 文件名

就可以把相应的文件恢复到提测的代码

前提是改动不大

5.提交项目到Linux系统

首先知道项目的路径/home/tomcat/51vdai/app/

(1).使用Xshell5,点击新建文件传输，使用put,弹出所传文件目录，找到所在文件，点击文件压缩包
(2).若之前app下面有好多文件，先将其删除 rm -rf app/ 新建一个文件夹 mkdir app
(3).切换到cd app/
(4).put一下文件压缩包 在点击新建文件传输打开的窗口中put
(5).unzip app.zip解压
(6).重启Linux 先切换到 cd /usr/local/nginx/
　　　　　　　　　　　　./sbin/nginx -s stop
　　　　　　　　　　　　　./sbin/nginx
(7).最后可以查看进程 ps -ef|grep nginx 查看是否提交到Linux系统
如果第一次提交，app下面没有其他文件切换到 cd /home/tomcat/51vdai/app/ 在点击新建文件传输put