gruntjs - NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Mots clés : gruntjsnpmgulpbowerwebpackgruntjs

meilleur 3 Réponses gruntjs - NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

vote vote

95

const bs = Browsersync.create();   bs.init({       ...(DEBUG ? {} : { notify: false, ui: false }),        proxy: {         target: host,         middleware: [wpMiddleware, ...hotMiddlewares],       },        // no need to watch '*.js' here, webpack will take care of it for us,       // including full page reloads if HMR won't work       files: ['build/content/**/*.*'], }, resolve) 
gulp.task('bundle', function() {   // bundling source files with some gulp plugins like gulp-webpack maybe });  gulp.task('start', function() {   // starting server and stuff }); 
vote vote

83

project root [node_modules] // default directory for dependencies  -> dependency A  -> dependency B     [node_modules]     -> dependency A   -> dependency C     [node_modules]     -> dependency B       [node_modules]        -> dependency A     -> dependency D 
project root [bower_components] // default directory for dependencies  -> dependency A  -> dependency B // needs A  -> dependency C // needs B and D  -> dependency D 
<head>     <title>Wagon</title>     <script src=“build/wagon-bundle.js”></script> </head> 
<head>     <title>Skateboard</title>     <script src=“connectors/axle.js”></script>     <script src=“frames/board.js”></script>     <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->     <script src=“rolling-things/abstract-rolling-thing.js”></script>     <script src=“rolling-things/wheels/skateboard-wheel.js”></script>     <!-- but if skateboard-wheel also depends on ball-bearing -->     <!-- then having this script tag here could cause a problem -->     <script src=“rolling-things/ball-bearing.js”></script>     <!-- connect wheels to axle and axle to frame -->     <script src=“vehicles/skateboard/our-sk8bd-init.js”></script> </head> 
// package/lib is a dependency we require define(["package/lib"], function (lib) {   // behavior for our module   function foo() {     lib.log("hello world!");   }    // export (expose) foo to other modules as foobar   return {     foobar: foo,   }; }); 
require(["package/myModule"], function(myModule) {     myModule.foobar(); }); 
<script src=“app/require.js” data-main=“main.js” ></script> 
npm install -g –save-dev browserify 
//entry-point.js var foo = require("../foo.js"); console.log(foo(4)); 
browserify entry-point.js -o bundle-name.js 
<script src="”bundle-name.js”"></script> 
npm install -g –save-dev webpack 
webpack ./entry-point.js bundle-name.js 
var $ = require('jquery');  $('body').append("I've imported jQuery!"); 
<script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script>   System.import("scripts/display.js"); </script> 
grunt.initConfig({     clean: {     src: ['build/app.js', 'build/vendor.js']     },      copy: {     files: [{         src: 'build/app.js',         dest: 'build/dist/app.js'     }]     }      concat: {     'build/app.js': ['build/vendors.js', 'build/app.js']     }      // ... other task configurations ...  });  grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']); 
//import the necessary gulp plugins var gulp = require("gulp"); var sass = require("gulp-sass"); var minifyCss = require("gulp-minify-css"); var rename = require("gulp-rename");  //declare the task gulp.task("sass", function (done) {   gulp     .src("./scss/ionic.app.scss")     .pipe(sass())     .pipe(gulp.dest("./www/css/"))     .pipe(       minifyCss({         keepSpecialComments: 0,       })     )     .pipe(rename({ extname: ".min.css" }))     .pipe(gulp.dest("./www/css/"))     .on("end", done); }); 
npm install -g yo npm install --global generator-h5bp yo h5bp 
vote vote

74

var gulp        = require('gulp'),   minifyCSS     = require('gulp-minify-css'),   sass          = require('gulp-sass'),   browserify    = require('gulp-browserify'),   uglify        = require('gulp-uglify'),   rename        = require('gulp-rename'),   jshint        = require('gulp-jshint'),   jshintStyle   = require('jshint-stylish'),   replace       = require('gulp-replace'),   notify        = require('gulp-notify'), 

Questions similaires