Tag: gulp gulp

将gulp-sourcemaps与gulp-csso和gulp-sass结合在一起: 我试图让我的gulpfile.js这部分工作： gulp.task('compileSass', function() { return gulp.src(folders.src+'/scss/*scss') .pipe(sass()) .pipe(gulp.dest(folders.dest+'/css')); }); gulp.task('minifyStyles', ['compileSass'], function() { return gulp.src(folders.dest+'/css/style.css') .pipe(maps.init()) .pipe(minCss({ sourceMap: true })) .pipe(maps.write('./')) .pipe(rename('style.min.css')) .pipe(gulp.dest(folders.dest+'/css')); }); 我想开发工具来显示.scss文件。我不确定是否与rename()或者我在错误的时间调用了我的源代码，但是当我检查开发工具时，源代码始终是style.min.css 。

用gulp编译时出错: 我正在使用Laravel Elixr和Laravel混合，如下图所示并编译scss文件 OS = Windows 10 节点-v = v6.11.0 npm –v = 5.0.3 +– laravel-elixir@6.0.0-15 | `– gulp-sass@2.3.2 | `– node-sass@3.13.1 `– laravel-mix@0.11.4 `– node-sass@4.5.2 和错误是无法find模块“克隆可读”，如下所示 > [05:51:53] Using gulpfile D:\www\fevrok.com\gulpfile.js > [05:51:53] Starting 'all'… > [05:51:53] Starting 'sass'… > [05:51:54] 'sass' errored after 713 ms > [05:51:54] Error: Cannot find module 'cloneable-readable' > […]

Gulp – 改进捆绑的js文件的gulp.watch的性能: 当我对js文件进行更改时，我遇到了浏览器livereloading的性能问题。在我的咕噜设置，我有以下手表： gulp.task('watch', function() { gulp.watch(config.paths.html, ['html']); gulp.watch(config.paths.js, ['js', 'lint']); gulp.watch(config.paths.css, ['css']); }); 因此，每当js文件发生变化时，就会触发js和lint任务。他们如下： gulp.task('js', function() { browserify(config.paths.mainJs) .transform(reactify) .bundle() .on('error', console.error.bind(console)) .pipe(source('bundle.js')) .pipe(gulp.dest(config.paths.dest + '/scripts')) .pipe(connect.reload()); }); gulp.task('lint', function() { return gulp.src(config.paths.js) .pipe(lint({config: 'eslint.config.json'})) .pipe(lint.format()); }); 有了这个设置， js文件更改的实时重新加载不会扩展。随着项目越来越大，实时重新加载需要更长的时间。即使是一个有大约十几个JS文件的小项目，每次重新载入也需要3.8秒。我知道问题在于，在每个js文件更改时，都会重新激活和捆绑项目中的每个js文件，这是一项昂贵的操作，对于除了您更改的js文件以外的所有js文件都是完全冗余的。什么是更好的方式来处理实时重新加载？我知道webpack使用热模块重新加载，有没有这样的gulp等值？

如何debugginggulp-sourcemaps不做任何事情？: 对于gulp-sourcemaps我有一个相当标准的用例 https://github.com/floridoo/gulp-sourcemaps gulp.src( bundle.src) .pipe(sourcemaps.init()) .pipe(concat(bundle.dst + '.' + opts.ext)) .pipe(uglify()) .pipe(sourcemaps.write()) .pipe(gulp.dest('./public/built')); 这产生适当的连接和丑化的文件。但是没有源图添加到他们。 bundle.src是一个文件path的数组。不知道如何debugging这个。

Sourcemap“sources”数组链接到“../../stdin”而不是实际的SCSS文件: 我今天跑npm update ，接下来是一场灾难。我在安装软件包的时候遇到了麻烦，但是在所有的东西看起来都在正确的位置之后，我开始了我的gulp任务，把我的SCSS代码编译成CSS。这段代码重现了我的问题： var gulp = require('gulp'), sourcemaps = require('gulp-sourcemaps'), sass = require('gulp-sass'); gulp.task('sass', function() { gulp.src('www/sass/*.scss') .pipe(sourcemaps.init()) .pipe(sass()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('www/css')); }); gulp.task('default', ['sass'], function(){ gulp.watch('www/sass/*.scss', {debounceDelay: 2000}, ['sass']); }); 在通过gulp default运行这段代码之后，结果如下： WWW / SASS / example.scss #test { color: red; } WWW / CSS / example.css #test { color: red; } /*# […]

Uglify使用Gulp来缩小和生成源图: 有人可以解释如何uglify，然后concat，并最终使用gulp生成源地图？我似乎无法得到它的工作。我没有看到关于这个API的任何东西，但在我看来，它应该得到支持。重点是生成源地图，并在设置断点时使用源文件。我曾尝试将concat首先放在下面的代码中，但是当我这样做时，断点在chrome浏览器中不起作用。我在用 concat = require('gulp-concat'),和uglify = require('gulp-uglify') 。 gulp.src(['src/app.js', 'src/**/*.js']) .pipe(sourcemaps.init()) .pipe(uglify({ compress: { negate_iife: false } })) .pipe(concat("app.concat.js")) .pipe(rename('app.min.js')) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('public/js'));