使用 grunt 作为前端 php

Question

请原谅，我是 Grunt 的新手，我通常不编写代码 PHP。这对我来说是一个新项目。我正在尝试使用 Grunt，因为它很棒，其中一些 html 文件中的 php 很少。我最初安装的是常规 grunt，而不是 php grunt。现在我意识到也许我应该安装 grunt-php。但是，我尝试删除 gruntfile.js，安装 grunt-php，然后将新配置添加到新的 gruntfile.js，但终端一直给我一个 "default" not found 错误，即使默认任务肯定存在。我知道我做错了什么，但我不知道是什么。将 php 添加到我的原始 grunt 文件是否更容易？我不知道我会怎么做。这是原始文件：

module.exports = function(grunt){
   require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
   grunt.initConfig({
       htmlhint: {
            build: {
               options: {
                    'tag-pair': true,
                    'tagname-lowercase': true,
                    'attr-lowercase': true,
                    'attr-value-double-quotes': true,
                    'doctype-first': true,
                    'spec-char-escape': true,
                    'id-unique': true,
                    'head-script-disabled': true,
                    'style-disabled': true
                 },
                 src: ['index.php']
             }
         },
         watch: {
             html: {
                 files: ['index.php'],
                 tasks: ['htmlhint']
            },
            js: {
                 files: ['assets/js/**/*.js'],
                 tasks: ['uglify']
             },
             css: {
                 files: ['assets/sass/**/*.scss'],
                 tasks: ['buildcss']
             }
         },
         sass: {
             build: {
                 files: {
                     'build/css/master.css': 'assets/sass/master.scss'
                 }
             }
         },
         browserSync: {
            /*bsFiles: {
                src : ['assets/css/*.css', '*.html'],
            },*/
             files: ['*.html', 'assets/templates/*.html'],
            options: {
                server: {
                    baseDir: "./"
                }
            }
        },
        cssc: {
            build: {
                options: {
                    consolidateViaDeclarations: true,
                    consolidateViaSelectors:    true,
                    consolidateMediaQueries:    true
                },
                files: {
                    'build/css/master.css': 'build/css/master.css'
                }
            }
        },

        cssmin: {
             build: {
                 src: 'build/css/master.css',
                 dest: 'build/css/master.css'
             }
        },

        uglify: {
            build: {
                files: {
                    'build/js/base.min.js':  ['bower_components/jquery/dis/jquery.min.js', 'bower_components/angular/angular.min.js', 'assets/js/**/*.js']
                 }
             }
         },
         pkg: grunt.file.readJSON('package.json'),
         phpunit:{
            test:{
                 dir:'',
                 options:{
                     bin: 'bin/phpunit',
                     configuration:'app/phpunit.xml'
                 }
             }
         },
         'sf2-cache-clear':{
              options: {},
              dev: {},
              prod: {}
          }
      }); 
      grunt.registerTask('buildcss',  ['sass', 'cssc', 'cssmin']);
      grunt.loadNpmTasks('grunt-contrib-sass');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.loadNpmTasks('grunt-browser-sync');
      grunt.loadNpmTasks('grunt-phpunit');
      grunt.loadNpmTasks('grunt-symfony2');
      grunt.registerTask('default', ['uglify', 'buildcss', 'browserSync','watch']);
     grunt.registerTask('test', ['phpunit:test']);

   };

这是我尝试为 grunt 添加的 grunt 代码-php:

require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        php: {
        dist: {
             options: {
                 hostname: '127.0.0.1',
                 port: 9000,
                 base: 'dist', // Project root 
                 keepalive: false,
                 open: false
            }
        }
     },
     browserSync: {
         dist: {
             bsFiles: {
                  src: [
                      // Files you want to watch for changes 
                  ]
             },
            options: {
                proxy: '<%= php.dist.options.hostname %>:<%=php.dist.options.port %>',
                watchTask: true,
                notify: true,
                open: true,
                logLevel: 'silent',
                ghostMode: {
                     clicks: true,
                     scroll: true,
                     links: true,
                     forms: true
                 }
             }
         }
    },
       watch: {
          // Your watch tasks 
       }
   });

   grunt.registerTask('serve', [
     'php:dist',         // Start PHP Server 
     'browserSync:dist', // Using the php instance as a proxy 
     'watch'             // Any other watch tasks you want to run 
   ]);
   grunt.registerTask('default', ['php']);

Answer 1

将 g运行t-php 添加到现有的 G运行t 文件中会更容易。首先在你的项目中安装它：

npm install grunt-php --save-dev

然后在您的 G运行t 文件中添加任务配置（例如在 pkg 和 php-unit 之间）：

php: {
    dist: {
        options: {
            base: 'build'
        }
    }
},

最后将任务定义到运行服务器并默认构建 + 服务：

grunt.registerTask('serve', [
    'php:dist',
    'watch'
]);

grunt.registerTask('default', ['uglify', 'buildcss', 'serve', 'watch']);

使用 grunt 作为前端 php

Using grunt for front end with php

html

php

gruntjs