I would like to create a resources.zip file which will contain css/styles.css.
So far I have got most of this working, the only problem is the archive only contains the styles.css file and not its parent directory css.
gulpfile.js
const gulp = require('gulp');
const zip = require('gulp-zip');
gulp.task('default', () => {
return gulp.src('css/*')
.pipe(zip('resources.zip'))
.pipe(gulp.dest('build'));
});
I think you need to setup the base for the gulp.src:
gulp.src('css/*', {base: '.'})
This is because the default base is:
Default: everything before a glob starts (see glob2base)
source. Zipped file path: zip.
Related
I am a newbie of gulp, just started now. I am confused in giving src and destination to my task. What i am try to do is to create a new minify destination folder with same inside hierarchy like below.
Current Folder Structure (originals files):
app
-components
--post-creator
---post-creator.component.js
--post-rating
---post-rating.component.js
-routing_components
--app-routing
---app-routing.component.js
--user-routing
---user-routing.component.js
Minify Folder (where js file are minified):
minify_destination
-components
--post-creator
---post-creator.component.js
--post-rating
---post-rating.component.js
-routing_components
--app-routing
---app-routing.component.js
--user-routing
---user-routing.component.js
Gulpfile.js
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('default', function () {
gulp.src('app/components/*/*/*.js')
.pipe(uglify())
.pipe(gulp.dest(components_min))
});
Try:
gulp.src('app/**/*.js')
and everything else as you have it and let me know if that works for you. In this case your components_min should replace the app folder - everything before the glob - and maintain your folder structure.
I'm using Gulp to compress a zip file and then upload it to AWS Lambda. The upload zip file is done manually. Only the process of compressing is handled by Gulp.
Here is my gulpfile.js
var gulp = require('gulp');
var zip = require('gulp-zip');
var del = require('del');
var install = require('gulp-install');
var runSequence = require('run-sequence');
var awsLambda = require("node-aws-lambda");
gulp.task('clean', function() {
return del(['./dist', './dist.zip']);
});
gulp.task('js', function() {
return gulp.src('index.js')
.pipe(gulp.dest('dist/'));
});
gulp.task('npm', function() {
return gulp.src('./package.json')
.pipe(gulp.dest('dist/'))
.pipe(install({production: true}));
});
gulp.task('zip', function() {
return gulp.src(['dist/**/*', '!dist/package.json'])
.pipe(zip('dist.zip'))
.pipe(gulp.dest('./'));
});
gulp.task('deploy', function(callback) {
return runSequence(
['clean'],
['js', 'npm'],
['zip'],
callback
);
});
After running the deploy task, a zip folder named dist.zip is created consists of a index.js file and a node_modules folder. The node_modules folder contains only a lodash library.
This is index.js
var _ = require('lodash');
console.log('Loading function');
exports.handler = (event, context, callback) => {
//console.log('Received event:', JSON.stringify(event, null, 2));
var b = _.chunk(['a', 'b', 'c', 'd', 'e'], 3);
console.log(b);
callback(null, event.key1); // Echo back the first key value
//callback('Something went wrong');
};
After using AWS lambda console to upload the dist.zip folder. There is an error showing that the lodash library cannot be found
{
"errorMessage": "Cannot find module 'lodash'",
"errorType": "Error",
"stackTrace": [
"Function.Module._load (module.js:276:25)",
"Module.require (module.js:353:17)",
"require (internal/module.js:12:17)",
"Object.<anonymous> (/var/task/index.js:1:71)",
"Module._compile (module.js:409:26)",
"Object.Module._extensions..js (module.js:416:10)",
"Module.load (module.js:343:32)",
"Function.Module._load (module.js:300:12)",
"Module.require (module.js:353:17)"
]
}
But in the zip folder, there is a node_modules directory that contains the lodash lib.
dist.zip
|---node_modules
|--- lodash
|---index.js
When i zip the node_modules directory and the file index.js manually, it works fine.
Does anyone have idea what wrongs ? Maybe when compressing using Gulp, there is a misconfigured for the lib path ?
I had same problem few days back.
Everyone pointed to gulp zip, however it was not problem with gulp zip.
Below worked fine:
gulp
.src(['sourceDir/**'], {nodir: true, dot: true} )
.pipe(zip('target.zip'))
.pipe(gulp.dest('build/'));
That is, note the below, in 2nd param of src, in the above:
{nodir: true, dot: true}
That is, we have to include dot files for the zip (ex: .config, .abc, etc.)
So, include above in .src of gulp, else all others like copy, zip, etc. will be improper.
The package gulp-zip is massively popular (4.3k downloads per day) and there does not seem to be any Gulp substitute. The problem is definitely with relative paths and how gulp-zip processes them. Even when using a base path option in the gulp.src function (example below), gulp-zip finds a way to mess it up.
gulp.task("default", ["build-pre-zip"], function () {
return gulp.src([
"dist/**/*"
], { base: "dist/" })
.pipe(debug())
.pipe(zip("dist.zip"))
.pipe(gulp.dest("./dist/"));
});
Since there is no good Gulp solution as of 1/4/2017 I suggest a work-around. I use Gulp to populate the dist folder first, exactly how I need it with the proper node_modules folder. Then it is time to zip the dist folder properly with relative file paths stored. To do that and also update Lambda, I use a batch file (Windows) of command line options to get the job done. Here is the upload.bat file I created to take the place of the gulp-zip task:
start /wait cmd /c "gulp default"
start /wait cmd /c "C:\Program Files\WinRAR\WinRAR.exe" a -r -ep1 dist\dist.zip dist\*.*
aws lambda update-function-code --zip-file fileb://dist/dist.zip --function-name your-fn-name-here
If you use WinRAR you will find their command line docs here, for WinZip go here. That .bat file assumes you are using the AWS Command Line Interface (CLI) which is a godsend; get it here.
If you are wishing this answer pointed you towards a 100% Gulp solution, to that I say, "You and me both!". Good luck.
I have the following folder structure within a solution that I have inherited
.\gulp.config.js
.\gulpfile.js
.\.jscsrc
.\.jshintrc
.\default.js
.\Resources\js\main.js
.\Resources\js\modules\ various user created js files
.\Resources\js\vendor\ various js files i.e jQuery
I have installed gulp-jscs and gulp-jshint.
The .jscsrc I have taken from https://github.com/johnpapa/pluralsight-gulp/blob/master/.jscsrc.
I have the following within gulpfile.js:
'use strict'
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
gulp.task('verifyJS',function(){
gulp.src([
'./Resources/**/*.js',
'./*.js'
])
.pipe(jscs())
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', { verbose: true }));
});
I am trying to update the excludeFiles within .jscsrc to exclude the following:
.\default.js
.\resources\js\vendor
This is what I have tried:
"excludeFiles": [
"node_modules/**",
"bower_components/**",
"Resources/js/vendor/**", // vendor supplied files. ie jQuery
"./Resources/js/vendor/**",
"default.js",
"/default.js",
"./default.js",
],
I have included all the combinations that I have tried.
But when i run gulp verifyJS it is still including the files that I want to exclude.
How do I correctly set excludeFiles to exclude the file within the root of the project and the subfolder with all subsequent files and folders?
gulp-jshint doesn't care what's in your .jscsrc since that is the config file for gulp-jscs. You need a .jshintignore file instead.
Here's how to ignore your vendor files in both gulp-jscs and gulp-jshint:
.jscsrc
"excludeFiles": [
"node_modules/**",
"bower_components/**",
"Resources/js/vendor/**",
"default.js",
],
.jshintignore
node_modules/**
bower_components/**
Resources/js/vendor/**
default.js
gulpfile.js
gulp.task('verifyJS', function(){
return gulp.src([
'./Resources/**/*.js',
'./*.js'
])
.pipe(jscs())
.pipe(jscs.reporter()) // you forgot this
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish', { verbose: true }));
});
I'm using gulp-watch to watch for changes
and right now I have it ignore layout files. The problem is that whenever I update a layout file, I have to change some other file for it to compile. Is there any way using gulp-watch to watch everything and then compile a part of it? I saw this relevant link but it did not use gulp-watch.
I misread this question. I've left my original answer at the bottom for reference anyway.
You could use gulp-if.
gulp.task('stream', function () {
return gulp.src('dir/**/*.*')
.pipe(watch('dir/**/*.*'))
.pipe(gulpif(function (file) {
return file.ext != ".layout"//your excluded extension
}, processIfTrue()))
.pipe(gulp.dest('build'));
});
That link does use gulp-watch. In fact, as I understand, that link explains exactly what you want to do.
The gulp-watch and whatever task you run on change take separate gulp.src instances.
You can, for example, use gulp.src('**/*.*') for your gulp.watch, and then gulp.src('**/*.less') for your compilation task.
You can set 2 separate watchers to run, and modifying each respective file listed below in src would trigger the respective task for that filename:
$ tree -I node_modules
.
├── gulpfile.js
├── package.json
└── src
├── layout-file-1.html
├── layout-file-2.html
├── other-file-1.html
└── other-file-2.html
1 directory, 6 files
gulpfile.js - gulp.watch() function
var gulp = require('gulp')
// files with the word "layout" in them
var layoutFiles = 'src/**/*layout*';
// files without the word "layout" in them
var otherFiles = ['src/**/*', '!'+layoutFiles];
// these tasks will show as completed in console output
gulp.task('build-layout-files');
gulp.task('build-other-files');
gulp.task('watch', function(cb) {
// watch only layoutFiles
gulp.watch(layoutFiles, ['build-layout-files'])
// watch only otherFiles
gulp.watch(otherFiles, ['build-other-files'])
})
gulp.task('default', ['watch'])
gulpfile.js - gulp-watch module
var gulp = require('gulp')
var watch = require('gulp-watch')
// use print to debug watch processes
var print = require('gulp-print')
// files with the word "layout" in them
var layoutFiles = 'src/**/*layout*';
// files without the word "layout" in them
var otherFiles = ['src/**/*', '!'+layoutFiles];
gulp.task('watch:layout-files', function(cb) {
watch(layoutFiles, function () {
gulp.src(layoutFiles)
.pipe(print(function(fileName) {
return "Compiling Layout File: "+fileName;
}))
.pipe(gulp.dest('build/layout-files'))
});
})
gulp.task('watch:other-files', function(cb) {
watch(otherFiles, function () {
gulp.src(otherFiles)
.pipe(print(function(fileName) {
return "Compiling Other File: "+fileName;
}))
.pipe(gulp.dest('build/other-files'))
});
})
gulp.task('default', ['watch:layout-files', 'watch:other-files'])
I use gulp-react to compile jsx to js. I need to save folder structure while compiling.
The code below works good for single folder of all files, but I need dumanic destination
var gulp = require('gulp');
var react = require('gulp-react');
gulp.task('default', function () {
return gulp.src('template.jsx')
.pipe(react())
.pipe(gulp.dest('dist')); // in this line need dumanic destination
});
Any Ideas?
Problem solved like this
gulp.src('./public/js/**/.')