gulp | 易学教程

How do I watch multiple files with gulp-browserify but process only one?

阅读更多关于 How do I watch multiple files with gulp-browserify but process only one?

I'm trying to wire up gulp-browserify and gulp-watch to rebuild my bundle each time a source file changes. However, gulp-browserify requires a single entry point for the compilation (e.g. src/js/app.js ) and fetches every dependency itself: gulp.src('src/js/app.js') .pipe(browserify()) .pipe(gulp.dest('dist')) However, with gulp-watch this fails to rebuild on every change because only the entry point file is being watched. What I actually need is a possibility to watch multiple files and then process only the entry point file (look for replaceEverythingWithEntryPointFile ): gulp.src("src/**/*

Gulp Front Matter +Markdown through Nunjucks

阅读更多关于 Gulp Front Matter +Markdown through Nunjucks

问题 I'm working on adding some simple Markdown processing to my Gulp process, but I can't quite get the pieces to work together. I seem to be missing the step between getting the front matter content, and determining which Nunjuck template to apply. Here's the section in my Gulp file: gulp.task('pages:md', function() { gulp.src('./content/**/*.md') .pipe(frontMatter({ // optional configuration property: 'frontMatter', // property added to file object remove: true // should we remove front-matter

How to expose 'require' to the browser when using browserify from within gulp?

阅读更多关于 How to expose 'require' to the browser when using browserify from within gulp?

When I have a file x.js that looks like this: x.js module.exports = function (n) { return n * 111 } and I run browserify from the command line like so: browserify -r ./x.js > bundle.js I get an output file that looks like this (roughly): require=(function e(t,n,r){function ...... ./App.jsx":[function(require,module,exports){ module.exports=require('0+DPR/'); },{}]},{},[]) Then in my browser code I can do this: <html> <head> <title>React server rendering example</title> <script src="static/bundle.js"></script> </head> <body> Welcome to the React server rendering example. Here is a server

How to inject variable value into JS file from GULP

阅读更多关于 How to inject variable value into JS file from GULP

问题 Hopefully this is a quick question. What I'm trying to do is to add a timestamp into a Javascript object in a JS file while the file is being built with GULP. Basically, in "file.js", I have an object where I would like to have object.timeStamp that equals the time of the GULP build. I am currently adding a timestamp to the top of the file using gulp-header, but I have been asked to add the timestamp to a property in the object. My thought was to inject the value from GULP, but all of the

Why don't newly added files trigger my gulp-watch task?

阅读更多关于 Why don't newly added files trigger my gulp-watch task?

问题 I have a gulp task which uses gulp-imagemin to compress images. When I add new files to this directory I'd like for this task to compress them as well. I read that gulp.watch doesn't trigger on new files and that I should try gulp-watch so I used it like so; gulp.task('images', function() { watch({glob: './source/images/*'}, function (files) { return files .pipe(plumber()) .pipe(imagemin({ progressive: true, interlaced: true })) .pipe(gulp.dest('./www')); }); }); This works the same as gulp

gulp.js livereload with express server?

阅读更多关于 gulp.js livereload with express server?

I am trying to setup my gulpfile.js to use livereload on an express server without much luck. I see examples out there but they seem to be related to a static file server. http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903 http://rhumaric.com/2014/01/livereload-magic-gulp-style/ So I have an app.js file which does the standard express server with jade files, etc. What I want to do is get it to work with livereload from a gulp.js boot. app.set('port', process.env.PORT || 3000); var server = app.listen(app.get('port'), function() { debug('Express server listening on

Bests practice for Browserify in large web projects - Gulp

阅读更多关于 Bests practice for Browserify in large web projects - Gulp

Here is the thing, I come from a world where you have several js files included to a web page. Some are always included in the page (your libs, menu etc...) and others are depending on the current page (js for login page, js for subscription etc...). Basically let's say that I have 1 different js file per page plus the libs. Now I want to start a new project with browserify and I am in front of a big problem : In all the examples I have seen, there is always a single entry point (like app.js). In my case I would have n entry points (1 per page). So my questions are : Is it against good

gulp with gulp-ruby-sass: Error: ../style.css.map:3:1: Unknown word

阅读更多关于 gulp with gulp-ruby-sass: Error: ../style.css.map:3:1: Unknown word

Getting a strange error using a basic gulp/express build watch. Directory Layout project/ - sass/ - style.scss - gulpfile.js - index.html Gulpfile.js var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'); gulp.task('express', function() { var express = require('express'); var app = express(); app.use(require('connect-livereload')({port: 4002})); app.use(express.static(__dirname)); app.listen(4000); }); var tinylr; gulp.task('livereload', function() { tinylr = require(

Browsersync within a Docker container

阅读更多关于 Browsersync within a Docker container

I've got a Wordpress/MySQL docker container, which I use for developing themes & plugins. I access this on localhost:8000. It uses a Gulp build process & I am trying to add browsersync to the mix. I'm having a hard time getting the browsersync to actually proxy out of the container. From the Gulp output I can see that its generating the changes, just not actually making any changes in the browser. Heres my docker-compose.yml, gulpfile, dockerfile & shell script. version: '2' services: wordpress_db: image: mariadb restart: 'always' ports: - 3360:3306 volumes: - ./db_data:/docker-entrypoint

How can I promise-ify a one-off usage of gulp in my application?

阅读更多关于 How can I promise-ify a one-off usage of gulp in my application?

问题 As part of a small program I'm writing, I would like to use gulp to convert a large set of a files to markdown. This is not part of a build step separate from the program. It's a part of the program. So I'm not using a gulpfile to handle this. The problem is, since it's async, I want to use a promise which will alert me when the gulp task is finished. Something like this would be ideal: io.convertSrc = function() { var def = q.defer(); gulp.src(src + '/*.md') .pipe(marked({})) .pipe(gulp.dest