比方说,例如,您正在Backbone或其他任何东西上构建项目,并且您需要按特定顺序加载脚本,例如underscore.js需要先加载backbone.js.
如何使脚本连接以便它们按顺序排列？
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src(['./source/js/*.js', './source/js/**/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./build/js/'));
});
我的脚本顺序正确source/index.html,但由于文件是按字母顺序组织的,gulp会underscore.js在之后连接backbone.js,并且我的脚本顺序source/index.html无关紧要,它会查看目录中的文件.
那么有人对此有所了解吗？
我有最好的办法是重新命名与供应商的脚本1,2,3给他们以正确的顺序,但我不知道如果我喜欢这个.
随着我学到更多,我发现Browserify是一个很好的解决方案,起初可能很痛苦,但它很棒.
通常我们可以通过类似的东西从控制台运行gulp任务gulp mytask.反正我是否可以将参数传递给gulp任务？如果可能,请举例说明如何完成.
我正在运行gulp 3.6.2并具有从在线示例设置的以下任务
gulp.task('watch', ['default'], function () {
gulp.watch([
'views/**/*.html',
'public/**/*.js',
'public/**/*.css'
], function (event) {
return gulp.src(event.path)
.pipe(refresh(lrserver));
});
gulp.watch(['./app/**/*.coffee'],['scripts']);
gulp.watch('./app/**/*.scss',['scss']);
});
任何时候我的CoffeeScript gulp手表都会出现错误停止 - 显然不是我想要的.
gulp.watch(['./app/**/*.coffee'],['scripts']).on('error', swallowError);
gulp.watch('./app/**/*.scss',['scss']).on('error', swallowError);
function swallowError (error) { error.end(); }
但它似乎没有用.
我究竟做错了什么？
为了回应@Aperçu的回答,我修改了我的swallowError方法并尝试了以下方法:
gulp.task('scripts', function () {
gulp.src('./app/script/*.coffee')
.pipe(coffee({ bare: true }))
.pipe(gulp.dest('./public/js'))
.on('error', swallowError);
});
重新启动,然后在我的咖啡文件中创建语法错误.同样的问题:
[gulp] Finished 'scripts' after 306 ?s
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: W:\bariokart\app\script\trishell.coffee:5:1: error: unexpected *
*
^
at …我已经通过npm install安装了节点模块，然后尝试在命令提示符下执行gulp sass-watch。之后，我得到以下回应。
[18:18:32] Requiring external module babel-register
fs.js:27
const { Math, Object, Reflect } = primordials;
^
ReferenceError: primordials is not defined
在gulp sass-watch之前尝试过这个
npm -g install gulp-cli
在Windows 7上,我按照此处的说明安装了gulp:http://markgoodyear.com/2014/01/getting-started-with-gulp/:
npm install gulp -gnpm install gulp --save-devgulpfile.js文件.但是,当我尝试运行时gulp,我收到此错误消息:
module.js:340
throw err;
^
Error: cannot file module 'gulp-util'
at Function.Module._resolveFilename (module.js:338:15)
等等
但是gulp-util存在(在本地app文件夹中):
node_modules
gulp
node_modules
gulp-util
知道可能是什么原因？
我有以下gulpfile.js,我正在通过命令行"gulp message"执行:
var gulp = require('gulp');
gulp.task('message', function() {
console.log("HTTP Server Started");
});
我收到以下错误消息:
[14:14:41] Using gulpfile ~\Documents\node\first\gulpfile.js
[14:14:41] Starting 'message'...
HTTP Server Started
[14:14:41] The following tasks did not complete: message
[14:14:41] Did you forget to signal async completion?
我在Windows 10系统上使用gulp 4.这是gulp --version的输出:
[14:15:15] CLI version 0.4.0
[14:15:15] Local version 4.0.0-alpha.2
我正在尝试将项目从工作目录转移到服务器(同一台机器).使用以下代码:
gulp.src([
'index.php',
'css/**',
'js/**',
'src/**',
])
.pipe(gulp.dest('/var/www/'));
我希望看到所有文件都被复制了.但它会使dir结构变平 - 所有目录都被复制,但每个文件都放在根目录中/var/www
Gulp看起来像一个伟大的构建工具,但复制项目肯定是一个简单的过程？
在glob匹配中编辑文件时,以下Gulpjs任务正常工作:
// watch task.
gulp.task('watch', ['build'], function () {
gulp.watch(src + '/js/**/*.js', ['scripts']);
gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
gulp.watch(src + '/less/*.less', ['styles']);
gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});
// build task.
gulp.task('build', ['clean'], function() {
return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});
但是,对于新文件或已删除文件,它不起作用(它不会被触发).有什么我想念的吗？
编辑:即使使用grunt-watch插件,它似乎无法正常工作:
gulp.task('scripts', function() {
return streamqueue(
{ objectMode: true },
gulp.src([
vendor + '/jquery/dist/jquery.min.js',
vendor + '/bootstrap/dist/js/bootstrap.min.js'
]),
gulp.src([
src + '/js/**/*.js'
]).pipe(plugins.uglify())
)
.pipe(plugins.concat(pkg.name + '.min.js'))
.pipe(gulp.dest(dest + '/js/'));
});
gulp.task('watch', ['build'], function () {
plugins.watch({glob: src + …我看到人们使用gulp和webpack.但后来我读到webpack可以取代gulp？我在这里完全糊涂了......有人可以解释一下吗？
UPDATE
最后我开始喝了一口气.我是现代前端的新手,只是想快速起步和跑步.现在,经过一年多的时间,我的脚已经湿透了,我已准备好转向webpack了.对于那些以同样的鞋子开始的人,我建议采用相同的方法.不是说你不能尝试webpack而只是说如果它看起来很复杂,那么先从gulp开始......没有错.
如果你不想要gulp,是的,那就是grunt,但是你也可以在package.json中指定命令,并从命令行调用它们而不需要任务运行器来启动和运行.例如:
"scripts": {
"babel": "babel src -d build",
"browserify": "browserify build/client/app.js -o dist/client/scripts/app.bundle.js",
"build": "npm run clean && npm run babel && npm run prepare && npm run browserify",
"clean": "rm -rf build && rm -rf dist",
"copy:server": "cp build/server.js dist/server.js",
"copy:index": "cp src/client/index.html dist/client/index.html",
"copy": "npm run copy:server && npm run copy:index",
"prepare": "mkdir -p dist/client/scripts/ && npm run copy",
"start": "node dist/server"
},
在我的gulp.js文件中,我将所有HTML文件从该examples文件夹传输到该build文件夹中.
创建gulp任务并不困难:
var gulp = require('gulp');
gulp.task('examples', function() {
return gulp.src('./examples/*.html')
.pipe(gulp.dest('./build'));
});
但我无法弄清楚如何检索任务中找到(和处理)的文件名,或者我找不到合适的插件.