我正在尝试通过 Grunt 任务将我的前端工作流程提升一步。
我在 Gruntfile.js 中设置了几个任务。目前只有 grunt-contrib-sass 和 grunt-contrib-watch,因此每当我更改 .sass 文件时,.css 文件都会自动重新编译。
我想要实现的目标如下:
我想添加一个任务来监听由 UniServerZ/XAMPP/WAMP 或任何其他提供商启动的本地服务器。我想在每次编辑服务器基本目录中的任何文件时触发重新加载。
我知道设置这样的任务非常容易,例如'grunt-express' 会为您启动本地服务器,但我真的想听听以 UniServerZ/XAMPP/WAMP 启动的服务器。
如果可以实现的话,我将很高兴看到这种场景的示例配置。
最佳答案
以下是我在 Windows 7 上使用 Wamp 2.2 的方法。
首先,您需要grunt-contrib-watch使用 livereload 正确设置。我也用grunt-sass而不是grunt-contrib-sass ,因为 grunt-sass 使用 Libsass 。 LibSass 是 Sass 引擎的 C/C++ 端口,而且速度更快。
要安装它们,请使用以下命令:
npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev
这是 Gruntfile 的示例:
module.exports = function(grunt) {
grunt.initConfig({
watch: {
sass: {
files: 'folder/to/your/sass/**/*.sass',
tasks: ['sass:dist'],
options: {
livereload: true,
},
},
//Watch your theme files
livereload: {
files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
options: {
livereload: true
},
}
},
sass: {
options: {
includePaths: ['where/to/find/additional/@import/scss/files'],
outputStyle: 'nested',
imagePath: 'how/to/rewrite/image/path',
sourceMap: true
},
dist: {
files: {
'output/file.css': 'input/file.scss'
}
}
},
});
// Default task
grunt.registerTask('default', ['watch']);
// Load NpmTask
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
};
您可以使用load-grunt-tasks来节省一些时间。 ,并删除手动加载任务:
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
然后我使用livereload plugin for firefox (or chrome or safari) .
启动 grunt watch 任务,在本地主机上打开您的站点,然后单击浏览器中的图标。现在,如果您编辑监视的文件,页面应该相应更新。
A solution exist自动在 WordPress 中添加 livereload js(在 function.php 中):
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
wp_enqueue_script('livereload');
}
关于gruntjs - 本地主机上的 Grunt Livereload 以 WAMP/XAMPP/UniServerZ 启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27228933/