上篇文章寫了Gulp編譯前端文件,這篇記錄下在搭建博客中使用Gulpcss
sudo npm install bower
{ "name": "blog", "description": "My Blog", "ignore": [ "**/.*", "node_modules", "vendor/bower_dl", "test", "tests" ] }
bower install jquery bootstrap --save
var gulp = require('gulp'); var elixir = require('laravel-elixir'); /* |-------------------------------------------------------------------------- | Elixir Asset Management |-------------------------------------------------------------------------- | | Elixir provides a clean, fluent API for defining some basic Gulp tasks | for your Laravel application. By default, we are compiling the Less | file for our application, as well as publishing vendor resources. | */ /** * 拷貝操做 */ gulp.task("copyfiles", function(){ // js gulp.src("vendor/bower_dl/jquery/dist/jquery.js") .pipe(gulp.dest("resources/assets/js/")); // bootstrap gulp.src("vendor/bower_dl/bootstrap/less/**") .pipe(gulp.dest("resources/assets/less/bootstrap")); gulp.src("vendor/bower_dl/bootstrap/dist/js/bootstrap.js") .pipe(gulp.dest("resources/assets/js/")); // font 不用編譯和合並 直接複製到public就能夠 gulp.src("vendor/bower_dl/bootstrap/fonts/**") .pipe(gulp.dest("public/assets/fonts")); }); elixir(function(mix) { // 合併兩個js文件 mix.scripts(['js/jquery.js', 'js/bootstrap.js'], 'public/assets/js/admin.js', 'resources/assets' ); // 編譯admin.less到public目錄下 mix.less('admin.less', 'public/assets/css/admin.css'); });
@import "bootstrap/bootstrap"; @import "//fonts.googleapis.com/css?family=Roboto:400,300"; @btn-font-weight: 300; @font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif; body, label, .checkbox label { font-weight: 300; }
gulp copyfiles
gulp
{{--CSS--}} <link rel="stylesheet" href="/assets/css/admin.css">
{{--JS--}} <script src="/assets/js/admin.js"></script>