私はgrunt-browser-sync
仕事をするのに近づいていますが、まだそこにはいません。
私はこの Gruntfile を思いつきました:
module.exports = function(grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
dist : {
src : ['js/libs/*.js', 'js/custom/*.js'],
dest : 'js/build/production.js',
}
},
uglify : {
dist : {
src : 'js/build/production.js',
dest : 'js/build/production.min.js'
}
},
sass : {
dist : {
options : {
style : 'compressed',
compass : 'true',
},
files : {
'css/main.css' : 'sass/main.scss'
}
}
},
autoprefixer : {
options : {
browsers : ['> 5%', 'last 2 version', 'ie 8', 'ie 9']
},
dist : {
files : {
'css/main.css' : 'css/main.css'
}
}
},
watch : {
options : {
livereload : true
},
content : {
files : '*.html',
tasks : ['browserSync']
},
scripts : {
files : ['js/libs/*.js', 'js/custom/*.js'],
tasks : ['concat', 'uglify', 'browserSync'],
options : {
spawn : false,
},
},
css : {
files : ['sass/**/*.scss'],
tasks : ['sass', 'autoprefixer', 'browserSync'],
options : {
spawn : false,
}
}
},
browserSync : {
files : {
src : ['css/*.css', 'images/*.*', 'js/build/production.min.js', '*.html'],
},
options : {
server: {
baseDir: "./",
},
watchTask : true
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);
};
私が欲しいのは次のとおりです。
- 端末に入力すると、ブラウザの静的サーバー ページで
grunt watch
自動的に開かれます。index.html
- CSS、JS、または画像が変更されたときにライブ リロードするページ。
私の構成で何が起こるかは次のとおりです。
- ファイルを保存するときだけ、新しいブラウザ ウィンドウが開きます
- 何かを保存するたびに、複数のブラウザーウィンドウが開き、
localhost
数が変化し続け、プラグインがまったく役に立たなくなります
ファイルの可能なすべての場所に登録したことは承知しtasks : ['browserSync']
ていますが、それが browser-sync が何かを行う唯一の方法です。私はこれで十分だと思っていました:
grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);
しかし、私はそれで運がありません。browser-sync がトリガーされますが、静的サーバーは開かれていません。