在显式保存操作中自动绑定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文件的最佳方式是什么？

回答

相关问题