gruntjs - NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack
meilleur 3 Réponses gruntjs - NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack
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 }); 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 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'),