加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > PHP教程 > 正文

用php为前端使用grunt

发布时间:2020-12-13 16:56:47 所属栏目:PHP教程 来源:网络整理
导读:原谅我,我是Grunt的新手,我通常不会编写 PHP代码.这对我来说是一个新项目.我正在尝试使用Grunt,因为它很棒,有一些html文件,其中包含最少的PHP. 我最初安装了常规的grunt,而不是php grunt.现在我意识到也许我应该安装grunt-php.但是,我尝试删除gruntfile.js,
原谅我,我是Grunt的新手,我通常不会编写 PHP代码.这对我来说是一个新项目.我正在尝试使用Grunt,因为它很棒,有一些html文件,其中包含最少的PHP.
我最初安装了常规的grunt,而不是php grunt.现在我意识到也许我应该安装grunt-php.但是,我尝试删除gruntfile.js,安装grunt-php,然后将新配置添加到新的gruntfile.js,但终端不断给我一个“默认”未找到错误,即使默认任务肯定存在.我知道我做错了什么,但我不知道是什么.
将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-php添加的grunt代码:

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']);

解决方法

将grunt-php添加到现有的Gruntfile会更容易.
首先在项目中安装它:

npm install grunt-php --save-dev

然后在Gruntfile中添加任务配置(例如在pkg和php-unit之间):

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

最后定义运行服务器的任务并默认构建服务器:

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读