在顯式保存操作中自動綁定CSS和JS文件的最佳方式是什麼？

我目前正在建立一個開發環境。它建立在Node.js，Express.js和pug上。我也在使用Gulp和Webpack。在顯式保存操作中自動綁定CSS和JS文件的最佳方式是什麼？

我幾乎設置了一切，除了一件事讓我回來，這是自動捆綁。我知道Nodemon很難整合BrowserSync，因此我放棄了這一點。但是我有一些希望能夠設置自動綁定。

我咕嘟咕嘟任務文件如下：

styles.js

const gulp = require("gulp"); 
postcss = require("gulp-postcss"); 
autoprefixer = require("autoprefixer"); 
nested = require('postcss-nested'); 
cssvars = require('postcss-simple-vars'); 
cssImport = require('postcss-import'); 
mixins = require('postcss-mixins'); 

gulp.task('styles', function(){ 
    return gulp.src('./app/assets/styles/styles.css') 
    .pipe(postcss([cssImport, mixins, cssvars, nested, autoprefixer])) 
    .pipe(gulp.dest('./app/temp/styles')) 
});

和我的script.js文件：

const gulp = require("gulp"); 
webpack = require("webpack"); 

gulp.task('scripts', function(callback) { 
    webpack(require('../../webpack.config.js'), function(err, stats) { 
     if (err) { 
      console.log(err.toString()); 
     } 
     console.log(stats.toString()); 
     callback(); 

     console.log("Hooray, webpack completed!"); 
    }); 
});

，這裏是我的的WebPack .config.js：

const path = require('path'); 
const glob = require('glob'); 
const nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    target: "node", 
    externals: [nodeExternals()], 
    entry: { 
     Server: "./app/server.js", 
     Modules: glob.sync("./app/controllers/**/*.js"), 
     Controllers: glob.sync("./app/controllers/**/*.js"), 
     Routes: "./app/routes/index.js" 
    }, 
    output: { 
     path: path.resolve("./app/temp/scripts"), 
     filename: "[name].js" 
    }, 
    module: { 
     loaders: [ 
      { 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015'] 
       }, 
       test: /\.js$/, 
       exclude: /node_modules/ 
      } 
     ] 
    }, 
    node: { 
     fs: "empty" 
    } 
};

正如您所看到的，我可以運行gulp風格來捆綁我的樣式，並且吞噬腳本來捆綁/編譯我的腳本。

但是，在我能夠在前端看到我的更改之前，我每次都必須運行這些gulp命令。任何人都可以建議如何通過自動捆綁每一個明確的保存行動來克服這個障礙？還是有另一種方法可以建議？

感謝您花時間閱讀。

來源

2017-08-30 Leafyshark

您正在尋找gulp.watch函數，它是內置的吞嚥本身。

它會監視指定的文件，當它檢測到任何更改時，它會以回調的方式運行函數 - 它可能是捆綁js/css的腳本。從文檔

而且用法示例：

gulp.watch('js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });

這就是從我的項目真實的例子：

gulp.task('watch', function() { gulp.watch(['src/styles/**/*.scss', 'src/styles/**/*.css', '!src/styles/styles.css'], ['scss']); gulp.watch(['src/scripts/**/*.js', '!src/scripts/main.js'], ['js']); gulp.watch('src/views/*.php', ['php']); })

只要檢測下提供的路徑中的任何改變，它推出 'SCSS' ，'js'和'php'任務作爲回調 - 這些任務等同於您的'樣式'和'腳本'。

文檔可以在這裏找到：Gulp API

來源

2017-08-30 16:03:48 Melcma

正是我一直在尋找。謝謝。您是否知道如何在所有這些設備之間啓用「瀏覽器同步」操作？似乎很難在後臺運行Nodemon。 – Leafyshark

最簡單的方法是查看現有的設置，因爲從零開始設置可能會有一點花費。這是我的個人配置，你可以看看我是如何做到的，如果你願意的話可以使用它 - [Reaper]（https://github.com/melcma/Reaper）。 – Melcma

在顯式保存操作中自動綁定CSS和JS文件的最佳方式是什麼？

回答

相關問題